静态页面

src/components/common/MainPageContainer/index.vue

@@ -59,7 +59,7 @@ export default {
     },
     MainHeaderRightClick: { // 头部右边选项点击事件
       default: () => { },
-      type: Object
+      type: Function
     },
     MainTitleClick: { // 页面标题点击事件
       default: () => { },

src/pages/KaiJiangZhanShi/DaLeTou/index.vue

@@ -1,113 +1,116 @@
 <template>
   <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="大乐透开奖">
+      <div class="PageContainer">
+        <!-- nav -->
+        <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
 
-    <!-- nav -->
-    <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
+          <!-- 最新开奖 -->
+          <div slot="SwiperItem-1" class="Item">
 
-      <!-- 最新开奖 -->
-      <div slot="SwiperItem-1" class="Item">
-
-        <!-- 开奖信息 -->
-        <div class="PrizeInfo" v-if="LotteryRes.length">
-          <div class="flex-h">
-            <div class="Icon">
-              <img src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
+            <!-- 开奖信息 -->
+            <div class="PrizeInfo" v-if="LotteryRes.length">
+              <div class="flex-h">
+                <div class="Icon">
+                  <img src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
+                </div>
+                <span>大乐透</span>
+                <div class="flex-item">
+                  <div class="Time">
+                    <span>开奖日期：{{LotteryRes[0].openingDate}}</span>
+                    <span>第{{LotteryRes[0].issueNo}}期</span>
+                  </div>
+                  <ul class="Num">
+                    <li v-for="(item, index) in LotteryRes[0].firstResult.split(',')" :key="`First-${index}`">{{item}}</li>
+                    <li v-for="(item, index) in LotteryRes[0].secondResult.split(',')" :key="`Second-${index}`" class="active">{{item}}</li>
+                  </ul>
+                </div>
+              </div>
             </div>
-            <span>大乐透</span>
-            <div class="flex-item">
-              <div class="Time">
-                <span>开奖日期：{{LotteryRes[0].openingDate}}</span>
-                <span>第{{LotteryRes[0].issueNo}}期</span>
+
+            <!-- 销售信息 -->
+            <div class="SaleInfo flex-h">
+              <div class="flex-item">
+                <span>本期销售：</span>
+                <span>346015916元</span>
+              </div>
+              <div class="flex-item">
+                <span>奖池滚存：</span>
+                <span>34623015916元</span>
               </div>
-              <ul class="Num">
-                <li v-for="(item, index) in LotteryRes[0].firstResult.split(',')" :key="`First-${index}`">{{item}}</li>
-                <li v-for="(item, index) in LotteryRes[0].secondResult.split(',')" :key="`Second-${index}`" class="active">{{item}}</li>
-              </ul>
             </div>
-          </div>
-        </div>
 
-        <!-- 销售信息 -->
-        <div class="SaleInfo flex-h">
-          <div class="flex-item">
-            <span>本期销售：</span>
-            <span>346015916元</span>
-          </div>
-          <div class="flex-item">
-            <span>奖池滚存：</span>
-            <span>34623015916元</span>
-          </div>
-        </div>
+            <!-- 中奖详情 -->
+            <div class="ResList">
+              <span>本期中奖详情</span>
+              <ul>
+                <li class="flex-h">
+                  <span class="flex-item">奖项</span>
+                  <span class="flex-item">中奖注数（注）</span>
+                  <span class="flex-item">单注奖金（元）</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">一等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">6895903</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">二等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">6895</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">三等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">689</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">四等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">68</span>
+                </li>
+              </ul>
+              <div class="Btn">
+                <router-link :to="{ name: 'DaLeTou' }">大乐透投注</router-link>
+              </div>
+            </div>
 
-        <!-- 中奖详情 -->
-        <div class="ResList">
-          <span>本期中奖详情</span>
-          <ul>
-            <li class="flex-h">
-              <span class="flex-item">奖项</span>
-              <span class="flex-item">中奖注数（注）</span>
-              <span class="flex-item">单注奖金（元）</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">一等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">6895903</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">二等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">6895</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">三等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">689</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">四等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">68</span>
-            </li>
-          </ul>
-          <div class="Btn">
-            <router-link :to="{ name: 'DaLeTou' }">大乐透投注</router-link>
           </div>
-        </div>
 
-      </div>
+          <!-- 走势图 -->
+          <div slot="SwiperItem-2" class="Item">走势图</div>
 
-      <!-- 走势图 -->
-      <div slot="SwiperItem-2" class="Item">走势图</div>
+          <!-- 开奖历史 -->
+          <div slot="SwiperItem-3" class="Item">
+            <ul class="HistoryList">
+              <router-link tag="li" v-for="(item, index) in LotteryRes" :key="index" :to="{ name: 'DaLeTouXiangQing', query: { serialNo: item.serialNo, lotteryId: 'lottery', issueNo: item.issueNo } }" class="flex-h">
+                <div class="Icon">
+                  <img src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
+                </div>
+                <span>大乐透</span>
+                <div class="flex-item">
+                  <div class="Time">
+                    <span>开奖日期：{{item.openingDate}}</span>
+                    <span>第{{item.issueNo}}期</span>
+                  </div>
+                  <ul class="Num">
+                    <li v-for="(subItem, subIndex) in item.firstResult.split(',')" :key="`First-${subIndex}`">{{subItem}}</li>
+                    <li v-for="(subItem, subIndex) in item.secondResult.split(',')" :key="`Second-${subIndex}`" class="active">{{subItem}}</li>
+                  </ul>
+                </div>
+              </router-link>
+            </ul>
+          </div>
 
-      <!-- 开奖历史 -->
-      <div slot="SwiperItem-3" class="Item">
-        <ul class="HistoryList">
-          <router-link tag="li" v-for="(item, index) in LotteryRes" :key="index" :to="{ name: 'DaLeTouXiangQing', query: { serialNo: item.serialNo, lotteryId: 'lottery', issueNo: item.issueNo } }" class="flex-h">
-            <div class="Icon">
-              <img src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
-            </div>
-            <span>大乐透</span>
-            <div class="flex-item">
-              <div class="Time">
-                <span>开奖日期：{{item.openingDate}}</span>
-                <span>第{{item.issueNo}}期</span>
-              </div>
-              <ul class="Num">
-                <li v-for="(subItem, subIndex) in item.firstResult.split(',')" :key="`First-${subIndex}`">{{subItem}}</li>
-                <li v-for="(subItem, subIndex) in item.secondResult.split(',')" :key="`Second-${subIndex}`" class="active">{{subItem}}</li>
-              </ul>
-            </div>
-          </router-link>
-        </ul>
+        </TabSwiper>
       </div>
-
-    </TabSwiper>
-
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 import TabSwiper from '../../../components/common/TabSwiper'
 const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
 export default {
@@ -133,14 +136,10 @@ export default {
     })
   },
   components: {
+    MainPageContainer,
     TabSwiper
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '大乐透开奖' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -148,9 +147,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapIndexActions([
       'GetLotteryRes'
     ]),

src/pages/KaiJiangZhanShi/DaLeTou/page.scss

@@ -1,190 +1,200 @@
 .Page {
-  .Item {
-    .PrizeInfo {
-      padding: 0 0.15rem;
-      > div {
-        padding: 0.12rem 0;
-        border-bottom: 0.01rem solid #f7f7f7;
-        align-items: center;
-        > * {
-          margin-left: 0.15rem;
-          &:first-child {
-            margin-left: 0;
-          }
-        }
-        > .Icon {
-          width: 0.4rem;
-          height: 0.4rem;
-          position: relative;
-          overflow: hidden;
-        }
-        > span {
-          font-size: 0.16rem;
-          font-weight: bold;
-          color: #333;
-        }
-        > .flex-item {
-          > .Time {
-            font-size: 0;
-            white-space: nowrap;
-            > span {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              color: #999;
-              line-height: 0.2rem;
-              margin-left: 0.2rem;
-              &:first-child {
-                margin-left: 0;
-              }
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    .Item {
+      .PrizeInfo {
+        padding: 0 0.15rem;
+        > div {
+          padding: 0.12rem 0;
+          border-bottom: 0.01rem solid #f7f7f7;
+          align-items: center;
+          > * {
+            margin-left: 0.15rem;
+            &:first-child {
+              margin-left: 0;
             }
           }
-          > .Num {
-            font-size: 0;
-            white-space: nowrap;
-            margin-top: 0.1rem;
-            > li {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              width: 0.2rem;
-              height: 0.2rem;
-              line-height: 0.2rem;
-              color: #fff;
-              background: #ff5200;
-              border-radius: 100%;
-              text-align: center;
-              margin-left: 0.05rem;
-              &:first-child {
-                margin-left: 0;
+          > .Icon {
+            width: 0.4rem;
+            height: 0.4rem;
+            position: relative;
+            overflow: hidden;
+          }
+          > span {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #333;
+          }
+          > .flex-item {
+            > .Time {
+              font-size: 0;
+              white-space: nowrap;
+              > span {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                color: #999;
+                line-height: 0.2rem;
+                margin-left: 0.2rem;
+                &:first-child {
+                  margin-left: 0;
+                }
               }
-              &.active {
-                background: #3f63e5;
+            }
+            > .Num {
+              font-size: 0;
+              white-space: nowrap;
+              margin-top: 0.1rem;
+              > li {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                width: 0.2rem;
+                height: 0.2rem;
+                line-height: 0.2rem;
+                color: #fff;
+                background: #ff5200;
+                border-radius: 100%;
+                text-align: center;
+                margin-left: 0.05rem;
+                &:first-child {
+                  margin-left: 0;
+                }
+                &.active {
+                  background: #3f63e5;
+                }
               }
             }
           }
         }
       }
-    }
-    .SaleInfo {
-      margin-top: 0.1rem;
-      align-items: center;
-      > div {
-        font-size: 0;
-        white-space: nowrap;
-        text-align: center;
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 0.12rem;
-          color: #999;
-          line-height: 0.2rem;
-          &:nth-child(2) {
-            color: #333;
-          }
-        }
-      }
-    }
-    .ResList {
-      > span {
-        display: block;
-        text-align: center;
-        font-size: 0.15rem;
-        color: #666;
-        line-height: 0.2rem;
-        margin-top: 0.2rem;
-      }
-      > ul {
-        margin-top: 0.15rem;
-        > li {
-          align-items: center;
-          &:nth-child(2n + 1) {
-            background: #f2f2f2;
-            > span {
-              line-height: 0.3rem;
-            }
-          }
+      .SaleInfo {
+        margin-top: 0.1rem;
+        align-items: center;
+        > div {
+          font-size: 0;
+          white-space: nowrap;
+          text-align: center;
           > span {
+            display: inline-block;
+            vertical-align: middle;
             font-size: 0.12rem;
-            line-height: 0.4rem;
-            text-align: center;
-            color: #666;
+            color: #999;
+            line-height: 0.2rem;
+            &:nth-child(2) {
+              color: #333;
+            }
           }
         }
       }
-      > .Btn {
-        padding: 0 0.15rem;
-        margin-top: 0.5rem;
-        > a {
+      .ResList {
+        > span {
           display: block;
           text-align: center;
-          line-height: 0.42rem;
-          background: #ff5200;
-          border-radius: 0.06rem;
-          color: #fff;
+          font-size: 0.15rem;
+          color: #666;
+          line-height: 0.2rem;
+          margin-top: 0.2rem;
         }
-      }
-    }
-    .HistoryList {
-      padding: 0 0.15rem;
-      > li {
-        padding: 0.12rem 0;
-        border-bottom: 0.01rem solid #f7f7f7;
-        align-items: center;
-        > * {
-          margin-left: 0.15rem;
-          &:first-child {
-            margin-left: 0;
+        > ul {
+          margin-top: 0.15rem;
+          > li {
+            align-items: center;
+            &:nth-child(2n + 1) {
+              background: #f2f2f2;
+              > span {
+                line-height: 0.3rem;
+              }
+            }
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.4rem;
+              text-align: center;
+              color: #666;
+            }
           }
         }
-        > .Icon {
-          width: 0.4rem;
-          height: 0.4rem;
-          position: relative;
-          overflow: hidden;
-        }
-        > span {
-          font-size: 0.16rem;
-          font-weight: bold;
-          color: #333;
+        > .Btn {
+          padding: 0 0.15rem;
+          margin-top: 0.5rem;
+          > a {
+            display: block;
+            text-align: center;
+            line-height: 0.42rem;
+            background: #ff5200;
+            border-radius: 0.06rem;
+            color: #fff;
+          }
         }
-        > .flex-item {
-          > .Time {
-            font-size: 0;
-            white-space: nowrap;
-            > span {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              color: #999;
-              line-height: 0.2rem;
-              margin-left: 0.2rem;
-              &:first-child {
-                margin-left: 0;
-              }
+      }
+      .HistoryList {
+        padding: 0 0.15rem;
+        > li {
+          padding: 0.12rem 0;
+          border-bottom: 0.01rem solid #f7f7f7;
+          align-items: center;
+          > * {
+            margin-left: 0.15rem;
+            &:first-child {
+              margin-left: 0;
             }
           }
-          > .Num {
-            font-size: 0;
-            white-space: nowrap;
-            margin-top: 0.1rem;
-            > li {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              width: 0.2rem;
-              height: 0.2rem;
-              line-height: 0.2rem;
-              color: #fff;
-              background: #ff5200;
-              border-radius: 100%;
-              text-align: center;
-              margin-left: 0.05rem;
-              &:first-child {
-                margin-left: 0;
+          > .Icon {
+            width: 0.4rem;
+            height: 0.4rem;
+            position: relative;
+            overflow: hidden;
+          }
+          > span {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #333;
+          }
+          > .flex-item {
+            > .Time {
+              font-size: 0;
+              white-space: nowrap;
+              > span {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                color: #999;
+                line-height: 0.2rem;
+                margin-left: 0.2rem;
+                &:first-child {
+                  margin-left: 0;
+                }
               }
-              &.active {
-                background: #3f63e5;
+            }
+            > .Num {
+              font-size: 0;
+              white-space: nowrap;
+              margin-top: 0.1rem;
+              > li {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                width: 0.2rem;
+                height: 0.2rem;
+                line-height: 0.2rem;
+                color: #fff;
+                background: #ff5200;
+                border-radius: 100%;
+                text-align: center;
+                margin-left: 0.05rem;
+                &:first-child {
+                  margin-left: 0;
+                }
+                &.active {
+                  background: #3f63e5;
+                }
               }
             }
           }

src/pages/KaiJiangZhanShi/DaLeTouXiangQing/index.vue

@@ -1,76 +1,81 @@
 <template>
   <div class="Page">
-    <!-- 开奖信息 -->
-    <div class="PrizeInfo" v-if="PageData !== null">
-      <div class="flex-h">
-        <div class="Icon">
-          <img src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
-        </div>
-        <span>大乐透</span>
-        <div class="flex-item">
-          <div class="Time">
-            <span>开奖日期：{{PageData.openingDate}}</span>
-            <span>第{{PageData.issueNo}}期</span>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="开奖历史">
+      <div class="PageContainer">
+        <!-- 开奖信息 -->
+        <div class="PrizeInfo" v-if="PageData !== null">
+          <div class="flex-h">
+            <div class="Icon">
+              <img src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
+            </div>
+            <span>大乐透</span>
+            <div class="flex-item">
+              <div class="Time">
+                <span>开奖日期：{{PageData.openingDate}}</span>
+                <span>第{{PageData.issueNo}}期</span>
+              </div>
+              <ul class="Num">
+                <li v-for="(item, index) in PageData.firstResult.split(',')" :key="`First-${index}`">{{item}}</li>
+                <li v-for="(item, index) in PageData.secondResult.split(',')" :key="`Second-${index}`" class="active">{{item}}</li>
+              </ul>
+            </div>
           </div>
-          <ul class="Num">
-            <li v-for="(item, index) in PageData.firstResult.split(',')" :key="`First-${index}`">{{item}}</li>
-            <li v-for="(item, index) in PageData.secondResult.split(',')" :key="`Second-${index}`" class="active">{{item}}</li>
-          </ul>
         </div>
-      </div>
-    </div>
 
-    <!-- 销售信息 -->
-    <div class="SaleInfo flex-h">
-      <div class="flex-item">
-        <span>本期销售：</span>
-        <span>346015916元</span>
-      </div>
-      <div class="flex-item">
-        <span>奖池滚存：</span>
-        <span>34623015916元</span>
-      </div>
-    </div>
+        <!-- 销售信息 -->
+        <div class="SaleInfo flex-h">
+          <div class="flex-item">
+            <span>本期销售：</span>
+            <span>346015916元</span>
+          </div>
+          <div class="flex-item">
+            <span>奖池滚存：</span>
+            <span>34623015916元</span>
+          </div>
+        </div>
 
-    <!-- 中奖详情 -->
-    <div class="ResList">
-      <span>本期中奖详情</span>
-      <ul>
-        <li class="flex-h">
-          <span class="flex-item">奖项</span>
-          <span class="flex-item">中奖注数（注）</span>
-          <span class="flex-item">单注奖金（元）</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">一等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">6895903</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">二等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">6895</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">三等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">689</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">四等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">68</span>
-        </li>
-      </ul>
-      <div class="Btn">
-        <router-link :to="{ name: 'DaLeTou' }">大乐透投注</router-link>
+        <!-- 中奖详情 -->
+        <div class="ResList">
+          <span>本期中奖详情</span>
+          <ul>
+            <li class="flex-h">
+              <span class="flex-item">奖项</span>
+              <span class="flex-item">中奖注数（注）</span>
+              <span class="flex-item">单注奖金（元）</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">一等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">6895903</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">二等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">6895</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">三等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">689</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">四等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">68</span>
+            </li>
+          </ul>
+          <div class="Btn">
+            <router-link :to="{ name: 'DaLeTou' }">大乐透投注</router-link>
+          </div>
+        </div>
       </div>
-    </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapIndexState } = createNamespacedHelpers('index')
 export default {
   name: '',
@@ -85,13 +90,9 @@ export default {
     })
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '开奖历史' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -99,9 +100,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     Init () { // 初始化
       let SerialNo = this.$route.query.serialNo
       let IssueNo = this.$route.query.issueNo

src/pages/KaiJiangZhanShi/DaLeTouXiangQing/page.scss

@@ -1,191 +1,200 @@
 .Page {
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  > .PrizeInfo {
-    padding: 0 0.15rem;
-    > div {
-      padding: 0.12rem 0;
-      border-bottom: 0.01rem solid #f7f7f7;
-      align-items: center;
-      > * {
-        margin-left: 0.15rem;
-        &:first-child {
-          margin-left: 0;
-        }
-      }
-      > .Icon {
-        width: 0.4rem;
-        height: 0.4rem;
-        position: relative;
-        overflow: hidden;
-      }
-      > span {
-        font-size: 0.16rem;
-        font-weight: bold;
-        color: #333;
-      }
-      > .flex-item {
-        > .Time {
-          font-size: 0;
-          white-space: nowrap;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            color: #999;
-            line-height: 0.2rem;
-            margin-left: 0.2rem;
-            &:first-child {
-              margin-left: 0;
-            }
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > .PrizeInfo {
+      padding: 0 0.15rem;
+      > div {
+        padding: 0.12rem 0;
+        border-bottom: 0.01rem solid #f7f7f7;
+        align-items: center;
+        > * {
+          margin-left: 0.15rem;
+          &:first-child {
+            margin-left: 0;
           }
         }
-        > .Num {
-          font-size: 0;
-          white-space: nowrap;
-          margin-top: 0.1rem;
-          > li {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            width: 0.2rem;
-            height: 0.2rem;
-            line-height: 0.2rem;
-            color: #fff;
-            background: #ff5200;
-            border-radius: 100%;
-            text-align: center;
-            margin-left: 0.05rem;
-            &:first-child {
-              margin-left: 0;
+        > .Icon {
+          width: 0.4rem;
+          height: 0.4rem;
+          position: relative;
+          overflow: hidden;
+        }
+        > span {
+          font-size: 0.16rem;
+          font-weight: bold;
+          color: #333;
+        }
+        > .flex-item {
+          > .Time {
+            font-size: 0;
+            white-space: nowrap;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              color: #999;
+              line-height: 0.2rem;
+              margin-left: 0.2rem;
+              &:first-child {
+                margin-left: 0;
+              }
             }
-            &.active {
-              background: #3f63e5;
+          }
+          > .Num {
+            font-size: 0;
+            white-space: nowrap;
+            margin-top: 0.1rem;
+            > li {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              width: 0.2rem;
+              height: 0.2rem;
+              line-height: 0.2rem;
+              color: #fff;
+              background: #ff5200;
+              border-radius: 100%;
+              text-align: center;
+              margin-left: 0.05rem;
+              &:first-child {
+                margin-left: 0;
+              }
+              &.active {
+                background: #3f63e5;
+              }
             }
           }
         }
       }
     }
-  }
-  > .SaleInfo {
-    margin-top: 0.1rem;
-    align-items: center;
-    > div {
-      font-size: 0;
-      white-space: nowrap;
-      text-align: center;
-      > span {
-        display: inline-block;
-        vertical-align: middle;
-        font-size: 0.12rem;
-        color: #999;
-        line-height: 0.2rem;
-        &:nth-child(2) {
-          color: #333;
-        }
-      }
-    }
-  }
-  > .ResList {
-    > span {
-      display: block;
-      text-align: center;
-      font-size: 0.15rem;
-      color: #666;
-      line-height: 0.2rem;
-      margin-top: 0.2rem;
-    }
-    > ul {
-      margin-top: 0.15rem;
-      > li {
-        align-items: center;
-        &:nth-child(2n + 1) {
-          background: #f2f2f2;
-          > span {
-            line-height: 0.3rem;
-          }
-        }
+    > .SaleInfo {
+      margin-top: 0.1rem;
+      align-items: center;
+      > div {
+        font-size: 0;
+        white-space: nowrap;
+        text-align: center;
         > span {
+          display: inline-block;
+          vertical-align: middle;
           font-size: 0.12rem;
-          line-height: 0.4rem;
-          text-align: center;
-          color: #666;
+          color: #999;
+          line-height: 0.2rem;
+          &:nth-child(2) {
+            color: #333;
+          }
         }
       }
     }
-    > .Btn {
-      padding: 0 0.15rem;
-      margin-top: 0.5rem;
-      > a {
+    > .ResList {
+      > span {
         display: block;
         text-align: center;
-        line-height: 0.42rem;
-        background: #ff5200;
-        border-radius: 0.06rem;
-        color: #fff;
+        font-size: 0.15rem;
+        color: #666;
+        line-height: 0.2rem;
+        margin-top: 0.2rem;
       }
-    }
-  }
-  > .HistoryList {
-    padding: 0 0.15rem;
-    > li {
-      padding: 0.12rem 0;
-      border-bottom: 0.01rem solid #f7f7f7;
-      align-items: center;
-      > * {
-        margin-left: 0.15rem;
-        &:first-child {
-          margin-left: 0;
+      > ul {
+        margin-top: 0.15rem;
+        > li {
+          align-items: center;
+          &:nth-child(2n + 1) {
+            background: #f2f2f2;
+            > span {
+              line-height: 0.3rem;
+            }
+          }
+          > span {
+            font-size: 0.12rem;
+            line-height: 0.4rem;
+            text-align: center;
+            color: #666;
+          }
         }
       }
-      > .Icon {
-        width: 0.4rem;
-        height: 0.4rem;
-        position: relative;
-        overflow: hidden;
-      }
-      > span {
-        font-size: 0.16rem;
-        font-weight: bold;
-        color: #333;
+      > .Btn {
+        padding: 0 0.15rem;
+        margin-top: 0.5rem;
+        > a {
+          display: block;
+          text-align: center;
+          line-height: 0.42rem;
+          background: #ff5200;
+          border-radius: 0.06rem;
+          color: #fff;
+        }
       }
-      > .flex-item {
-        > .Time {
-          font-size: 0;
-          white-space: nowrap;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            color: #999;
-            line-height: 0.2rem;
-            margin-left: 0.2rem;
-            &:first-child {
-              margin-left: 0;
-            }
+    }
+    > .HistoryList {
+      padding: 0 0.15rem;
+      > li {
+        padding: 0.12rem 0;
+        border-bottom: 0.01rem solid #f7f7f7;
+        align-items: center;
+        > * {
+          margin-left: 0.15rem;
+          &:first-child {
+            margin-left: 0;
           }
         }
-        > .Num {
-          font-size: 0;
-          white-space: nowrap;
-          margin-top: 0.1rem;
-          > li {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            width: 0.2rem;
-            height: 0.2rem;
-            line-height: 0.2rem;
-            color: #fff;
-            background: #ff5200;
-            border-radius: 100%;
-            text-align: center;
-            margin-left: 0.05rem;
-            &:first-child {
-              margin-left: 0;
+        > .Icon {
+          width: 0.4rem;
+          height: 0.4rem;
+          position: relative;
+          overflow: hidden;
+        }
+        > span {
+          font-size: 0.16rem;
+          font-weight: bold;
+          color: #333;
+        }
+        > .flex-item {
+          > .Time {
+            font-size: 0;
+            white-space: nowrap;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              color: #999;
+              line-height: 0.2rem;
+              margin-left: 0.2rem;
+              &:first-child {
+                margin-left: 0;
+              }
             }
-            &.active {
-              background: #3f63e5;
+          }
+          > .Num {
+            font-size: 0;
+            white-space: nowrap;
+            margin-top: 0.1rem;
+            > li {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              width: 0.2rem;
+              height: 0.2rem;
+              line-height: 0.2rem;
+              color: #fff;
+              background: #ff5200;
+              border-radius: 100%;
+              text-align: center;
+              margin-left: 0.05rem;
+              &:first-child {
+                margin-left: 0;
+              }
+              &.active {
+                background: #3f63e5;
+              }
             }
           }
         }

src/pages/KaiJiangZhanShi/LanQiu/index.vue

@@ -1,139 +1,142 @@
 <template>
-  <div class="Page flex-v">
-
-    <!-- 开奖日期 -->
-    <div class="Time">
-      <div class="Icon">
-        <img src="../../../assets/img/icon6.png" class="centerLabel contain" alt="">
-      </div>
-      <span>20200815</span>
-      <span>星期五</span>
-    </div>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="篮球开奖">
+      <div class="PageContainer flex-v">
+        <!-- 开奖日期 -->
+        <div class="Time">
+          <div class="Icon">
+            <img src="../../../assets/img/icon6.png" class="centerLabel contain" alt="">
+          </div>
+          <span>20200815</span>
+          <span>星期五</span>
+        </div>
 
-    <div class="flex-item">
-      <div>
+        <div class="flex-item">
+          <div>
 
-        <!-- nav -->
-        <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
+            <!-- nav -->
+            <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
 
-          <!-- 胜负 -->
-          <div slot="SwiperItem-1" class="Item">
-            <ul>
-              <li v-for="(item, index) in NewstSportsRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
-                <div class="From">
-                  <span>{{item.leagueName}}</span>
-                  <span>{{item.matchWeek}}</span>
-                </div>
-                <div class="flex-item flex-h">
-                  <div class="flex-item">
-                    <span>{{item.awayTeamName}}</span>
-                  </div>
-                  <div class="flex-item">
-                    <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
-                    <span class="Big">{{item.wholeScore}}</span>
-                  </div>
-                  <div class="flex-item">
-                    <span>{{item.homeTeamName}}</span>
-                  </div>
+              <!-- 胜负 -->
+              <div slot="SwiperItem-1" class="Item">
+                <ul>
+                  <li v-for="(item, index) in NewstSportsRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
+                    <div class="From">
+                      <span>{{item.leagueName}}</span>
+                      <span>{{item.matchWeek}}</span>
+                    </div>
+                    <div class="flex-item flex-h">
+                      <div class="flex-item">
+                        <span>{{item.awayTeamName}}</span>
+                      </div>
+                      <div class="flex-item">
+                        <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
+                        <span class="Big">{{item.wholeScore}}</span>
+                      </div>
+                      <div class="flex-item">
+                        <span>{{item.homeTeamName}}</span>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+                <div>
+                  <a>竞彩篮球投注</a>
                 </div>
-              </li>
-            </ul>
-            <div>
-              <a>竞彩篮球投注</a>
-            </div>
-          </div>
+              </div>
 
-          <!-- 让分胜负 -->
-          <div slot="SwiperItem-2" class="Item">
-            <ul>
-              <li v-for="(item, index) in NewstSportsRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
-                <div class="From">
-                  <span>{{item.leagueName}}</span>
-                  <span>{{item.matchWeek}}</span>
-                </div>
-                <div class="flex-item flex-h">
-                  <div class="flex-item">
-                    <span>{{item.awayTeamName}}</span>
-                  </div>
-                  <div class="flex-item">
-                    <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
-                    <span class="Big">{{item.wholeScore}}</span>
-                  </div>
-                  <div class="flex-item">
-                    <span>{{item.homeTeamName}}</span>
-                  </div>
+              <!-- 让分胜负 -->
+              <div slot="SwiperItem-2" class="Item">
+                <ul>
+                  <li v-for="(item, index) in NewstSportsRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
+                    <div class="From">
+                      <span>{{item.leagueName}}</span>
+                      <span>{{item.matchWeek}}</span>
+                    </div>
+                    <div class="flex-item flex-h">
+                      <div class="flex-item">
+                        <span>{{item.awayTeamName}}</span>
+                      </div>
+                      <div class="flex-item">
+                        <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
+                        <span class="Big">{{item.wholeScore}}</span>
+                      </div>
+                      <div class="flex-item">
+                        <span>{{item.homeTeamName}}</span>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+                <div>
+                  <a>竞彩篮球投注</a>
                 </div>
-              </li>
-            </ul>
-            <div>
-              <a>竞彩篮球投注</a>
-            </div>
-          </div>
+              </div>
 
-          <!-- 胜分差 -->
-          <div slot="SwiperItem-3" class="Item">
-            <ul>
-              <li v-for="(item, index) in NewstSportsRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
-                <div class="From">
-                  <span>{{item.leagueName}}</span>
-                  <span>{{item.matchWeek}}</span>
+              <!-- 胜分差 -->
+              <div slot="SwiperItem-3" class="Item">
+                <ul>
+                  <li v-for="(item, index) in NewstSportsRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
+                    <div class="From">
+                      <span>{{item.leagueName}}</span>
+                      <span>{{item.matchWeek}}</span>
+                    </div>
+                    <div class="flex-item flex-h">
+                      <div class="flex-item">
+                        <span>{{item.awayTeamName}}</span>
+                      </div>
+                      <div class="flex-item">
+                        <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
+                        <span class="Big">{{item.wholeScore}}</span>
+                      </div>
+                      <div class="flex-item">
+                        <span>{{item.homeTeamName}}</span>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+                <div>
+                  <a>竞彩篮球投注</a>
                 </div>
-                <div class="flex-item flex-h">
-                  <div class="flex-item">
-                    <span>{{item.awayTeamName}}</span>
-                  </div>
-                  <div class="flex-item">
-                    <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
-                    <span class="Big">{{item.wholeScore}}</span>
-                  </div>
-                  <div class="flex-item">
-                    <span>{{item.homeTeamName}}</span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <div>
-              <a>竞彩篮球投注</a>
-            </div>
-          </div>
+              </div>
 
-          <!-- 大小分 -->
-          <div slot="SwiperItem-4" class="Item">
-            <ul>
-              <li v-for="(item, index) in NewstSportsRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
-                <div class="From">
-                  <span>{{item.leagueName}}</span>
-                  <span>{{item.matchWeek}}</span>
+              <!-- 大小分 -->
+              <div slot="SwiperItem-4" class="Item">
+                <ul>
+                  <li v-for="(item, index) in NewstSportsRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
+                    <div class="From">
+                      <span>{{item.leagueName}}</span>
+                      <span>{{item.matchWeek}}</span>
+                    </div>
+                    <div class="flex-item flex-h">
+                      <div class="flex-item">
+                        <span>{{item.awayTeamName}}</span>
+                      </div>
+                      <div class="flex-item">
+                        <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
+                        <span class="Big">{{item.wholeScore}}</span>
+                      </div>
+                      <div class="flex-item">
+                        <span>{{item.homeTeamName}}</span>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+                <div>
+                  <a>竞彩篮球投注</a>
                 </div>
-                <div class="flex-item flex-h">
-                  <div class="flex-item">
-                    <span>{{item.awayTeamName}}</span>
-                  </div>
-                  <div class="flex-item">
-                    <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
-                    <span class="Big">{{item.wholeScore}}</span>
-                  </div>
-                  <div class="flex-item">
-                    <span>{{item.homeTeamName}}</span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <div>
-              <a>竞彩篮球投注</a>
-            </div>
-          </div>
+              </div>
 
-        </TabSwiper>
+            </TabSwiper>
 
+          </div>
+        </div>
       </div>
-    </div>
-
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 import TabSwiper from '../../../components/common/TabSwiper'
 const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('index')
 export default {
@@ -154,14 +157,10 @@ export default {
     })
   },
   components: {
+    MainPageContainer,
     TabSwiper
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '篮球开奖' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -169,9 +168,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapIndexActions([
       'GetNewstSportsRes'
     ]),

src/pages/KaiJiangZhanShi/LanQiu/page.scss

@@ -1,87 +1,97 @@
 .Page {
-  > .Time {
-    font-size: 0;
-    white-space: nowrap;
-    border-bottom: 0.01rem solid #f7f7f7;
-    > * {
-      vertical-align: middle;
-      display: inline-block;
-      margin-left: 0.15rem;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    > .Time {
+      font-size: 0;
+      white-space: nowrap;
+      border-bottom: 0.01rem solid #f7f7f7;
+      > * {
+        vertical-align: middle;
+        display: inline-block;
+        margin-left: 0.15rem;
+      }
+      > .Icon {
+        width: 0.16rem;
+        height: 0.16rem;
+        position: relative;
+        overflow: hidden;
+      }
+      > span {
+        font-size: 0.12rem;
+        line-height: 0.28rem;
+        color: #999;
+      }
     }
-    > .Icon {
-      width: 0.16rem;
-      height: 0.16rem;
+    > .flex-item {
       position: relative;
       overflow: hidden;
-    }
-    > span {
-      font-size: 0.12rem;
-      line-height: 0.28rem;
-      color: #999;
-    }
-  }
-  > .flex-item {
-    position: relative;
-    overflow: hidden;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      .Item {
-        > ul {
-          padding: 0 0.15rem;
-          > li {
-            border-bottom: 0.01rem solid #f7f7f7;
-            padding: 0.15rem 0;
-            > .From {
-              margin-right: 0.2rem;
-              > span {
-                display: block;
-                text-align: left;
-                font-size: 0.12rem;
-                line-height: 0.2rem;
-                color: #666;
-              }
-            }
-            > .flex-item {
-              align-items: center;
-              > div {
-                margin-left: 0.1rem;
+      > div {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        .Item {
+          > ul {
+            padding: 0 0.15rem;
+            > li {
+              border-bottom: 0.01rem solid #f7f7f7;
+              padding: 0.15rem 0;
+              > .From {
+                margin-right: 0.2rem;
                 > span {
                   display: block;
-                  text-align: center;
+                  text-align: left;
                   font-size: 0.12rem;
-                  color: #333;
                   line-height: 0.2rem;
-                  &.Small {
-                    font-size: 0.1rem;
-                    color: #ff5200;
-                    &.active {
-                      color: #3f63e5;
+                  color: #666;
+                }
+              }
+              > .flex-item {
+                align-items: center;
+                > div {
+                  margin-left: 0.1rem;
+                  > span {
+                    display: block;
+                    text-align: center;
+                    font-size: 0.12rem;
+                    color: #333;
+                    line-height: 0.2rem;
+                    &.Small {
+                      font-size: 0.1rem;
+                      color: #ff5200;
+                      &.active {
+                        color: #3f63e5;
+                      }
+                    }
+                    &.Big {
+                      font-size: 0.14rem;
+                      font-weight: bold;
                     }
-                  }
-                  &.Big {
-                    font-size: 0.14rem;
-                    font-weight: bold;
                   }
                 }
               }
             }
           }
-        }
-        > div {
-          padding: 0 0.15rem;
-          margin-top: 0.5rem;
-          > a {
-            font-size: 0.16rem;
-            display: block;
-            text-align: center;
-            line-height: 0.42rem;
-            border-radius: 0.06rem;
-            background: #ff5200;
-            color: #fff;
+          > div {
+            padding: 0 0.15rem;
+            margin-top: 0.5rem;
+            > a {
+              font-size: 0.16rem;
+              display: block;
+              text-align: center;
+              line-height: 0.42rem;
+              border-radius: 0.06rem;
+              background: #ff5200;
+              color: #fff;
+            }
           }
         }
       }

src/pages/KaiJiangZhanShi/PaiLie3/index.vue

@@ -1,110 +1,114 @@
 <template>
   <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="排列3开奖">
+      <div class="PageContainer">
+        <!-- nav -->
+        <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
 
-    <!-- nav -->
-    <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
+          <!-- 最新开奖 -->
+          <div slot="SwiperItem-1" class="Item">
 
-      <!-- 最新开奖 -->
-      <div slot="SwiperItem-1" class="Item">
-
-        <!-- 开奖信息 -->
-        <div class="PrizeInfo" v-if="LotteryRes.length">
-          <div class="flex-h">
-            <div class="Icon">
-              <img src="../../../assets/img/icon7.png" class="centerLabel cover" alt="">
+            <!-- 开奖信息 -->
+            <div class="PrizeInfo" v-if="LotteryRes.length">
+              <div class="flex-h">
+                <div class="Icon">
+                  <img src="../../../assets/img/icon7.png" class="centerLabel cover" alt="">
+                </div>
+                <span>排列3</span>
+                <div class="flex-item">
+                  <div class="Time">
+                    <span>开奖日期：{{LotteryRes[0].openingDate}}</span>
+                    <span>第{{LotteryRes[0].issueNo}}期</span>
+                  </div>
+                  <ul class="Num">
+                    <li v-for="(item, index) in LotteryRes[0].result.split(',')" :key="`Res-${index}`">{{item}}</li>
+                  </ul>
+                </div>
+              </div>
             </div>
-            <span>排列3</span>
-            <div class="flex-item">
-              <div class="Time">
-                <span>开奖日期：{{LotteryRes[0].openingDate}}</span>
-                <span>第{{LotteryRes[0].issueNo}}期</span>
+
+            <!-- 销售信息 -->
+            <div class="SaleInfo flex-h">
+              <div class="flex-item">
+                <span>本期销售：</span>
+                <span>346015916元</span>
+              </div>
+              <div class="flex-item">
+                <span>奖池滚存：</span>
+                <span>34623015916元</span>
               </div>
-              <ul class="Num">
-                <li v-for="(item, index) in LotteryRes[0].result.split(',')" :key="`Res-${index}`">{{item}}</li>
-              </ul>
             </div>
-          </div>
-        </div>
 
-        <!-- 销售信息 -->
-        <div class="SaleInfo flex-h">
-          <div class="flex-item">
-            <span>本期销售：</span>
-            <span>346015916元</span>
-          </div>
-          <div class="flex-item">
-            <span>奖池滚存：</span>
-            <span>34623015916元</span>
-          </div>
-        </div>
+            <!-- 中奖详情 -->
+            <div class="ResList">
+              <span>本期中奖详情</span>
+              <ul>
+                <li class="flex-h">
+                  <span class="flex-item">奖项</span>
+                  <span class="flex-item">中奖注数（注）</span>
+                  <span class="flex-item">单注奖金（元）</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">一等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">6895903</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">二等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">6895</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">三等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">689</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">四等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">68</span>
+                </li>
+              </ul>
+              <div class="Btn">
+                <router-link :to="{ name: 'PaiLie3' }">排列3投注</router-link>
+              </div>
+            </div>
 
-        <!-- 中奖详情 -->
-        <div class="ResList">
-          <span>本期中奖详情</span>
-          <ul>
-            <li class="flex-h">
-              <span class="flex-item">奖项</span>
-              <span class="flex-item">中奖注数（注）</span>
-              <span class="flex-item">单注奖金（元）</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">一等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">6895903</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">二等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">6895</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">三等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">689</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">四等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">68</span>
-            </li>
-          </ul>
-          <div class="Btn">
-            <router-link :to="{ name: 'PaiLie3' }">排列3投注</router-link>
           </div>
-        </div>
 
-      </div>
+          <!-- 走势图 -->
+          <div slot="SwiperItem-2" class="Item">走势图</div>
 
-      <!-- 走势图 -->
-      <div slot="SwiperItem-2" class="Item">走势图</div>
+          <!-- 开奖历史 -->
+          <div slot="SwiperItem-3" class="Item">
+            <ul class="HistoryList">
+              <router-link tag="li" v-for="(item, index) in LotteryRes" :key="index" :to="{ name: 'PaiLie3XiangQing', query: { serialNo: item.serialNo, lotteryId: 'p3', issueNo: item.issueNo } }" class="flex-h">
+                <div class="Icon">
+                  <img src="../../../assets/img/icon7.png" class="centerLabel cover" alt="">
+                </div>
+                <span>排列3</span>
+                <div class="flex-item">
+                  <div class="Time">
+                    <span>开奖日期：{{item.openingDate}}</span>
+                    <span>第{{item.issueNo}}期</span>
+                  </div>
+                  <ul class="Num">
+                    <li v-for="(subItem, subIndex) in item.result.split(',')" :key="`Res-${subIndex}`">{{subItem}}</li>
+                  </ul>
+                </div>
+              </router-link>
+            </ul>
+          </div>
 
-      <!-- 开奖历史 -->
-      <div slot="SwiperItem-3" class="Item">
-        <ul class="HistoryList">
-          <router-link tag="li" v-for="(item, index) in LotteryRes" :key="index" :to="{ name: 'PaiLie3XiangQing', query: { serialNo: item.serialNo, lotteryId: 'p3', issueNo: item.issueNo } }" class="flex-h">
-            <div class="Icon">
-              <img src="../../../assets/img/icon7.png" class="centerLabel cover" alt="">
-            </div>
-            <span>排列3</span>
-            <div class="flex-item">
-              <div class="Time">
-                <span>开奖日期：{{item.openingDate}}</span>
-                <span>第{{item.issueNo}}期</span>
-              </div>
-              <ul class="Num">
-                <li v-for="(subItem, subIndex) in item.result.split(',')" :key="`Res-${subIndex}`">{{subItem}}</li>
-              </ul>
-            </div>
-          </router-link>
-        </ul>
+        </TabSwiper>
       </div>
-
-    </TabSwiper>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 import TabSwiper from '../../../components/common/TabSwiper'
 const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
 export default {
@@ -131,14 +135,10 @@ export default {
     })
   },
   components: {
+    MainPageContainer,
     TabSwiper
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '排列3开奖' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -146,9 +146,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapIndexActions([
       'GetLotteryRes'
     ]),

src/pages/KaiJiangZhanShi/PaiLie3/page.scss

@@ -1,190 +1,200 @@
 .Page {
-  .Item {
-    .PrizeInfo {
-      padding: 0 0.15rem;
-      > div {
-        padding: 0.12rem 0;
-        border-bottom: 0.01rem solid #f7f7f7;
-        align-items: center;
-        > * {
-          margin-left: 0.15rem;
-          &:first-child {
-            margin-left: 0;
-          }
-        }
-        > .Icon {
-          width: 0.4rem;
-          height: 0.4rem;
-          position: relative;
-          overflow: hidden;
-        }
-        > span {
-          font-size: 0.16rem;
-          font-weight: bold;
-          color: #333;
-        }
-        > .flex-item {
-          > .Time {
-            font-size: 0;
-            white-space: nowrap;
-            > span {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              color: #999;
-              line-height: 0.2rem;
-              margin-left: 0.2rem;
-              &:first-child {
-                margin-left: 0;
-              }
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    .Item {
+      .PrizeInfo {
+        padding: 0 0.15rem;
+        > div {
+          padding: 0.12rem 0;
+          border-bottom: 0.01rem solid #f7f7f7;
+          align-items: center;
+          > * {
+            margin-left: 0.15rem;
+            &:first-child {
+              margin-left: 0;
             }
           }
-          > .Num {
-            font-size: 0;
-            white-space: nowrap;
-            margin-top: 0.1rem;
-            > li {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              width: 0.2rem;
-              height: 0.2rem;
-              line-height: 0.2rem;
-              color: #fff;
-              background: #ff5200;
-              border-radius: 100%;
-              text-align: center;
-              margin-left: 0.05rem;
-              &:first-child {
-                margin-left: 0;
+          > .Icon {
+            width: 0.4rem;
+            height: 0.4rem;
+            position: relative;
+            overflow: hidden;
+          }
+          > span {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #333;
+          }
+          > .flex-item {
+            > .Time {
+              font-size: 0;
+              white-space: nowrap;
+              > span {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                color: #999;
+                line-height: 0.2rem;
+                margin-left: 0.2rem;
+                &:first-child {
+                  margin-left: 0;
+                }
               }
-              &.active {
-                background: #3f63e5;
+            }
+            > .Num {
+              font-size: 0;
+              white-space: nowrap;
+              margin-top: 0.1rem;
+              > li {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                width: 0.2rem;
+                height: 0.2rem;
+                line-height: 0.2rem;
+                color: #fff;
+                background: #ff5200;
+                border-radius: 100%;
+                text-align: center;
+                margin-left: 0.05rem;
+                &:first-child {
+                  margin-left: 0;
+                }
+                &.active {
+                  background: #3f63e5;
+                }
               }
             }
           }
         }
       }
-    }
-    .SaleInfo {
-      margin-top: 0.1rem;
-      align-items: center;
-      > div {
-        font-size: 0;
-        white-space: nowrap;
-        text-align: center;
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 0.12rem;
-          color: #999;
-          line-height: 0.2rem;
-          &:nth-child(2) {
-            color: #333;
-          }
-        }
-      }
-    }
-    .ResList {
-      > span {
-        display: block;
-        text-align: center;
-        font-size: 0.15rem;
-        color: #666;
-        line-height: 0.2rem;
-        margin-top: 0.2rem;
-      }
-      > ul {
-        margin-top: 0.15rem;
-        > li {
-          align-items: center;
-          &:nth-child(2n + 1) {
-            background: #f2f2f2;
-            > span {
-              line-height: 0.3rem;
-            }
-          }
+      .SaleInfo {
+        margin-top: 0.1rem;
+        align-items: center;
+        > div {
+          font-size: 0;
+          white-space: nowrap;
+          text-align: center;
           > span {
+            display: inline-block;
+            vertical-align: middle;
             font-size: 0.12rem;
-            line-height: 0.4rem;
-            text-align: center;
-            color: #666;
+            color: #999;
+            line-height: 0.2rem;
+            &:nth-child(2) {
+              color: #333;
+            }
           }
         }
       }
-      > .Btn {
-        padding: 0 0.15rem;
-        margin-top: 0.5rem;
-        > a {
+      .ResList {
+        > span {
           display: block;
           text-align: center;
-          line-height: 0.42rem;
-          background: #ff5200;
-          border-radius: 0.06rem;
-          color: #fff;
+          font-size: 0.15rem;
+          color: #666;
+          line-height: 0.2rem;
+          margin-top: 0.2rem;
         }
-      }
-    }
-    .HistoryList {
-      padding: 0 0.15rem;
-      > li {
-        padding: 0.12rem 0;
-        border-bottom: 0.01rem solid #f7f7f7;
-        align-items: center;
-        > * {
-          margin-left: 0.15rem;
-          &:first-child {
-            margin-left: 0;
+        > ul {
+          margin-top: 0.15rem;
+          > li {
+            align-items: center;
+            &:nth-child(2n + 1) {
+              background: #f2f2f2;
+              > span {
+                line-height: 0.3rem;
+              }
+            }
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.4rem;
+              text-align: center;
+              color: #666;
+            }
           }
         }
-        > .Icon {
-          width: 0.4rem;
-          height: 0.4rem;
-          position: relative;
-          overflow: hidden;
-        }
-        > span {
-          font-size: 0.16rem;
-          font-weight: bold;
-          color: #333;
+        > .Btn {
+          padding: 0 0.15rem;
+          margin-top: 0.5rem;
+          > a {
+            display: block;
+            text-align: center;
+            line-height: 0.42rem;
+            background: #ff5200;
+            border-radius: 0.06rem;
+            color: #fff;
+          }
         }
-        > .flex-item {
-          > .Time {
-            font-size: 0;
-            white-space: nowrap;
-            > span {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              color: #999;
-              line-height: 0.2rem;
-              margin-left: 0.2rem;
-              &:first-child {
-                margin-left: 0;
-              }
+      }
+      .HistoryList {
+        padding: 0 0.15rem;
+        > li {
+          padding: 0.12rem 0;
+          border-bottom: 0.01rem solid #f7f7f7;
+          align-items: center;
+          > * {
+            margin-left: 0.15rem;
+            &:first-child {
+              margin-left: 0;
             }
           }
-          > .Num {
-            font-size: 0;
-            white-space: nowrap;
-            margin-top: 0.1rem;
-            > li {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              width: 0.2rem;
-              height: 0.2rem;
-              line-height: 0.2rem;
-              color: #fff;
-              background: #ff5200;
-              border-radius: 100%;
-              text-align: center;
-              margin-left: 0.05rem;
-              &:first-child {
-                margin-left: 0;
+          > .Icon {
+            width: 0.4rem;
+            height: 0.4rem;
+            position: relative;
+            overflow: hidden;
+          }
+          > span {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #333;
+          }
+          > .flex-item {
+            > .Time {
+              font-size: 0;
+              white-space: nowrap;
+              > span {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                color: #999;
+                line-height: 0.2rem;
+                margin-left: 0.2rem;
+                &:first-child {
+                  margin-left: 0;
+                }
               }
-              &.active {
-                background: #3f63e5;
+            }
+            > .Num {
+              font-size: 0;
+              white-space: nowrap;
+              margin-top: 0.1rem;
+              > li {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                width: 0.2rem;
+                height: 0.2rem;
+                line-height: 0.2rem;
+                color: #fff;
+                background: #ff5200;
+                border-radius: 100%;
+                text-align: center;
+                margin-left: 0.05rem;
+                &:first-child {
+                  margin-left: 0;
+                }
+                &.active {
+                  background: #3f63e5;
+                }
               }
             }
           }

src/pages/KaiJiangZhanShi/PaiLie3XiangQing/index.vue

@@ -1,75 +1,80 @@
 <template>
   <div class="Page">
-    <!-- 开奖信息 -->
-    <div class="PrizeInfo" v-if="PageData !== null">
-      <div class="flex-h">
-        <div class="Icon">
-          <img src="../../../assets/img/icon7.png" class="centerLabel cover" alt="">
-        </div>
-        <span>排列3</span>
-        <div class="flex-item">
-          <div class="Time">
-            <span>开奖日期：{{PageData.openingDate}}</span>
-            <span>第{{PageData.issueNo}}期</span>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="开奖历史">
+      <div class="PageContainer">
+        <!-- 开奖信息 -->
+        <div class="PrizeInfo" v-if="PageData !== null">
+          <div class="flex-h">
+            <div class="Icon">
+              <img src="../../../assets/img/icon7.png" class="centerLabel cover" alt="">
+            </div>
+            <span>排列3</span>
+            <div class="flex-item">
+              <div class="Time">
+                <span>开奖日期：{{PageData.openingDate}}</span>
+                <span>第{{PageData.issueNo}}期</span>
+              </div>
+              <ul class="Num">
+                <li v-for="(item, index) in PageData.result.split(',')" :key="`Res-${index}`">{{item}}</li>
+              </ul>
+            </div>
           </div>
-          <ul class="Num">
-            <li v-for="(item, index) in PageData.result.split(',')" :key="`Res-${index}`">{{item}}</li>
-          </ul>
         </div>
-      </div>
-    </div>
 
-    <!-- 销售信息 -->
-    <div class="SaleInfo flex-h">
-      <div class="flex-item">
-        <span>本期销售：</span>
-        <span>346015916元</span>
-      </div>
-      <div class="flex-item">
-        <span>奖池滚存：</span>
-        <span>34623015916元</span>
-      </div>
-    </div>
+        <!-- 销售信息 -->
+        <div class="SaleInfo flex-h">
+          <div class="flex-item">
+            <span>本期销售：</span>
+            <span>346015916元</span>
+          </div>
+          <div class="flex-item">
+            <span>奖池滚存：</span>
+            <span>34623015916元</span>
+          </div>
+        </div>
 
-    <!-- 中奖详情 -->
-    <div class="ResList">
-      <span>本期中奖详情</span>
-      <ul>
-        <li class="flex-h">
-          <span class="flex-item">奖项</span>
-          <span class="flex-item">中奖注数（注）</span>
-          <span class="flex-item">单注奖金（元）</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">一等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">6895903</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">二等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">6895</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">三等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">689</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">四等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">68</span>
-        </li>
-      </ul>
-      <div class="Btn">
-        <router-link :to="{ name: 'PaiLie3' }">排列3投注</router-link>
+        <!-- 中奖详情 -->
+        <div class="ResList">
+          <span>本期中奖详情</span>
+          <ul>
+            <li class="flex-h">
+              <span class="flex-item">奖项</span>
+              <span class="flex-item">中奖注数（注）</span>
+              <span class="flex-item">单注奖金（元）</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">一等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">6895903</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">二等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">6895</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">三等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">689</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">四等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">68</span>
+            </li>
+          </ul>
+          <div class="Btn">
+            <router-link :to="{ name: 'PaiLie3' }">排列3投注</router-link>
+          </div>
+        </div>
       </div>
-    </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapIndexState } = createNamespacedHelpers('index')
 export default {
   name: '',
@@ -84,13 +89,9 @@ export default {
     })
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '开奖历史' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -98,9 +99,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     Init () { // 初始化
       let SerialNo = this.$route.query.serialNo
       let IssueNo = this.$route.query.issueNo

src/pages/KaiJiangZhanShi/PaiLie3XiangQing/page.scss

@@ -1,191 +1,200 @@
 .Page {
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  > .PrizeInfo {
-    padding: 0 0.15rem;
-    > div {
-      padding: 0.12rem 0;
-      border-bottom: 0.01rem solid #f7f7f7;
-      align-items: center;
-      > * {
-        margin-left: 0.15rem;
-        &:first-child {
-          margin-left: 0;
-        }
-      }
-      > .Icon {
-        width: 0.4rem;
-        height: 0.4rem;
-        position: relative;
-        overflow: hidden;
-      }
-      > span {
-        font-size: 0.16rem;
-        font-weight: bold;
-        color: #333;
-      }
-      > .flex-item {
-        > .Time {
-          font-size: 0;
-          white-space: nowrap;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            color: #999;
-            line-height: 0.2rem;
-            margin-left: 0.2rem;
-            &:first-child {
-              margin-left: 0;
-            }
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > .PrizeInfo {
+      padding: 0 0.15rem;
+      > div {
+        padding: 0.12rem 0;
+        border-bottom: 0.01rem solid #f7f7f7;
+        align-items: center;
+        > * {
+          margin-left: 0.15rem;
+          &:first-child {
+            margin-left: 0;
           }
         }
-        > .Num {
-          font-size: 0;
-          white-space: nowrap;
-          margin-top: 0.1rem;
-          > li {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            width: 0.2rem;
-            height: 0.2rem;
-            line-height: 0.2rem;
-            color: #fff;
-            background: #ff5200;
-            border-radius: 100%;
-            text-align: center;
-            margin-left: 0.05rem;
-            &:first-child {
-              margin-left: 0;
+        > .Icon {
+          width: 0.4rem;
+          height: 0.4rem;
+          position: relative;
+          overflow: hidden;
+        }
+        > span {
+          font-size: 0.16rem;
+          font-weight: bold;
+          color: #333;
+        }
+        > .flex-item {
+          > .Time {
+            font-size: 0;
+            white-space: nowrap;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              color: #999;
+              line-height: 0.2rem;
+              margin-left: 0.2rem;
+              &:first-child {
+                margin-left: 0;
+              }
             }
-            &.active {
-              background: #3f63e5;
+          }
+          > .Num {
+            font-size: 0;
+            white-space: nowrap;
+            margin-top: 0.1rem;
+            > li {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              width: 0.2rem;
+              height: 0.2rem;
+              line-height: 0.2rem;
+              color: #fff;
+              background: #ff5200;
+              border-radius: 100%;
+              text-align: center;
+              margin-left: 0.05rem;
+              &:first-child {
+                margin-left: 0;
+              }
+              &.active {
+                background: #3f63e5;
+              }
             }
           }
         }
       }
     }
-  }
-  > .SaleInfo {
-    margin-top: 0.1rem;
-    align-items: center;
-    > div {
-      font-size: 0;
-      white-space: nowrap;
-      text-align: center;
-      > span {
-        display: inline-block;
-        vertical-align: middle;
-        font-size: 0.12rem;
-        color: #999;
-        line-height: 0.2rem;
-        &:nth-child(2) {
-          color: #333;
-        }
-      }
-    }
-  }
-  > .ResList {
-    > span {
-      display: block;
-      text-align: center;
-      font-size: 0.15rem;
-      color: #666;
-      line-height: 0.2rem;
-      margin-top: 0.2rem;
-    }
-    > ul {
-      margin-top: 0.15rem;
-      > li {
-        align-items: center;
-        &:nth-child(2n + 1) {
-          background: #f2f2f2;
-          > span {
-            line-height: 0.3rem;
-          }
-        }
+    > .SaleInfo {
+      margin-top: 0.1rem;
+      align-items: center;
+      > div {
+        font-size: 0;
+        white-space: nowrap;
+        text-align: center;
         > span {
+          display: inline-block;
+          vertical-align: middle;
           font-size: 0.12rem;
-          line-height: 0.4rem;
-          text-align: center;
-          color: #666;
+          color: #999;
+          line-height: 0.2rem;
+          &:nth-child(2) {
+            color: #333;
+          }
         }
       }
     }
-    > .Btn {
-      padding: 0 0.15rem;
-      margin-top: 0.5rem;
-      > a {
+    > .ResList {
+      > span {
         display: block;
         text-align: center;
-        line-height: 0.42rem;
-        background: #ff5200;
-        border-radius: 0.06rem;
-        color: #fff;
+        font-size: 0.15rem;
+        color: #666;
+        line-height: 0.2rem;
+        margin-top: 0.2rem;
       }
-    }
-  }
-  > .HistoryList {
-    padding: 0 0.15rem;
-    > li {
-      padding: 0.12rem 0;
-      border-bottom: 0.01rem solid #f7f7f7;
-      align-items: center;
-      > * {
-        margin-left: 0.15rem;
-        &:first-child {
-          margin-left: 0;
+      > ul {
+        margin-top: 0.15rem;
+        > li {
+          align-items: center;
+          &:nth-child(2n + 1) {
+            background: #f2f2f2;
+            > span {
+              line-height: 0.3rem;
+            }
+          }
+          > span {
+            font-size: 0.12rem;
+            line-height: 0.4rem;
+            text-align: center;
+            color: #666;
+          }
         }
       }
-      > .Icon {
-        width: 0.4rem;
-        height: 0.4rem;
-        position: relative;
-        overflow: hidden;
-      }
-      > span {
-        font-size: 0.16rem;
-        font-weight: bold;
-        color: #333;
+      > .Btn {
+        padding: 0 0.15rem;
+        margin-top: 0.5rem;
+        > a {
+          display: block;
+          text-align: center;
+          line-height: 0.42rem;
+          background: #ff5200;
+          border-radius: 0.06rem;
+          color: #fff;
+        }
       }
-      > .flex-item {
-        > .Time {
-          font-size: 0;
-          white-space: nowrap;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            color: #999;
-            line-height: 0.2rem;
-            margin-left: 0.2rem;
-            &:first-child {
-              margin-left: 0;
-            }
+    }
+    > .HistoryList {
+      padding: 0 0.15rem;
+      > li {
+        padding: 0.12rem 0;
+        border-bottom: 0.01rem solid #f7f7f7;
+        align-items: center;
+        > * {
+          margin-left: 0.15rem;
+          &:first-child {
+            margin-left: 0;
           }
         }
-        > .Num {
-          font-size: 0;
-          white-space: nowrap;
-          margin-top: 0.1rem;
-          > li {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            width: 0.2rem;
-            height: 0.2rem;
-            line-height: 0.2rem;
-            color: #fff;
-            background: #ff5200;
-            border-radius: 100%;
-            text-align: center;
-            margin-left: 0.05rem;
-            &:first-child {
-              margin-left: 0;
+        > .Icon {
+          width: 0.4rem;
+          height: 0.4rem;
+          position: relative;
+          overflow: hidden;
+        }
+        > span {
+          font-size: 0.16rem;
+          font-weight: bold;
+          color: #333;
+        }
+        > .flex-item {
+          > .Time {
+            font-size: 0;
+            white-space: nowrap;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              color: #999;
+              line-height: 0.2rem;
+              margin-left: 0.2rem;
+              &:first-child {
+                margin-left: 0;
+              }
             }
-            &.active {
-              background: #3f63e5;
+          }
+          > .Num {
+            font-size: 0;
+            white-space: nowrap;
+            margin-top: 0.1rem;
+            > li {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              width: 0.2rem;
+              height: 0.2rem;
+              line-height: 0.2rem;
+              color: #fff;
+              background: #ff5200;
+              border-radius: 100%;
+              text-align: center;
+              margin-left: 0.05rem;
+              &:first-child {
+                margin-left: 0;
+              }
+              &.active {
+                background: #3f63e5;
+              }
             }
           }
         }

src/pages/KaiJiangZhanShi/PaiLie5/index.vue

@@ -1,110 +1,114 @@
 <template>
   <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="排列5开奖">
+      <div class="PageContainer">
+        <!-- nav -->
+        <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
 
-    <!-- nav -->
-    <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
+          <!-- 最新开奖 -->
+          <div slot="SwiperItem-1" class="Item">
 
-      <!-- 最新开奖 -->
-      <div slot="SwiperItem-1" class="Item">
-
-        <!-- 开奖信息 -->
-        <div class="PrizeInfo" v-if="LotteryRes.length">
-          <div class="flex-h">
-            <div class="Icon">
-              <img src="../../../assets/img/icon2.png" class="centerLabel cover" alt="">
+            <!-- 开奖信息 -->
+            <div class="PrizeInfo" v-if="LotteryRes.length">
+              <div class="flex-h">
+                <div class="Icon">
+                  <img src="../../../assets/img/icon2.png" class="centerLabel cover" alt="">
+                </div>
+                <span>排列5</span>
+                <div class="flex-item">
+                  <div class="Time">
+                    <span>开奖日期：{{LotteryRes[0].openingDate}}</span>
+                    <span>第{{LotteryRes[0].issueNo}}期</span>
+                  </div>
+                  <ul class="Num">
+                    <li v-for="(item, index) in LotteryRes[0].result.split(',')" :key="`Res-${index}`">{{item}}</li>
+                  </ul>
+                </div>
+              </div>
             </div>
-            <span>排列5</span>
-            <div class="flex-item">
-              <div class="Time">
-                <span>开奖日期：{{LotteryRes[0].openingDate}}</span>
-                <span>第{{LotteryRes[0].issueNo}}期</span>
+
+            <!-- 销售信息 -->
+            <div class="SaleInfo flex-h">
+              <div class="flex-item">
+                <span>本期销售：</span>
+                <span>346015916元</span>
+              </div>
+              <div class="flex-item">
+                <span>奖池滚存：</span>
+                <span>34623015916元</span>
               </div>
-              <ul class="Num">
-                <li v-for="(item, index) in LotteryRes[0].result.split(',')" :key="`Res-${index}`">{{item}}</li>
-              </ul>
             </div>
-          </div>
-        </div>
 
-        <!-- 销售信息 -->
-        <div class="SaleInfo flex-h">
-          <div class="flex-item">
-            <span>本期销售：</span>
-            <span>346015916元</span>
-          </div>
-          <div class="flex-item">
-            <span>奖池滚存：</span>
-            <span>34623015916元</span>
-          </div>
-        </div>
+            <!-- 中奖详情 -->
+            <div class="ResList">
+              <span>本期中奖详情</span>
+              <ul>
+                <li class="flex-h">
+                  <span class="flex-item">奖项</span>
+                  <span class="flex-item">中奖注数（注）</span>
+                  <span class="flex-item">单注奖金（元）</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">一等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">6895903</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">二等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">6895</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">三等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">689</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">四等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">68</span>
+                </li>
+              </ul>
+              <div class="Btn">
+                <router-link :to="{ name: 'PaiLie5' }">排列5投注</router-link>
+              </div>
+            </div>
 
-        <!-- 中奖详情 -->
-        <div class="ResList">
-          <span>本期中奖详情</span>
-          <ul>
-            <li class="flex-h">
-              <span class="flex-item">奖项</span>
-              <span class="flex-item">中奖注数（注）</span>
-              <span class="flex-item">单注奖金（元）</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">一等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">6895903</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">二等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">6895</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">三等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">689</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">四等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">68</span>
-            </li>
-          </ul>
-          <div class="Btn">
-            <router-link :to="{ name: 'PaiLie5' }">排列5投注</router-link>
           </div>
-        </div>
 
-      </div>
+          <!-- 走势图 -->
+          <div slot="SwiperItem-2" class="Item">走势图</div>
 
-      <!-- 走势图 -->
-      <div slot="SwiperItem-2" class="Item">走势图</div>
+          <!-- 开奖历史 -->
+          <div slot="SwiperItem-3" class="Item">
+            <ul class="HistoryList">
+              <router-link tag="li" v-for="(item, index) in LotteryRes" :key="index" :to="{ name: 'PaiLie5XiangQing', query: { serialNo: item.serialNo, lotteryId: 'p5', issueNo: item.issueNo } }" class="flex-h">
+                <div class="Icon">
+                  <img src="../../../assets/img/icon2.png" class="centerLabel cover" alt="">
+                </div>
+                <span>排列5</span>
+                <div class="flex-item">
+                  <div class="Time">
+                    <span>开奖日期：{{item.openingDate}}</span>
+                    <span>第{{item.issueNo}}期</span>
+                  </div>
+                  <ul class="Num">
+                    <li v-for="(subItem, subIndex) in item.result.split(',')" :key="`Res-${subIndex}`">{{subItem}}</li>
+                  </ul>
+                </div>
+              </router-link>
+            </ul>
+          </div>
 
-      <!-- 开奖历史 -->
-      <div slot="SwiperItem-3" class="Item">
-        <ul class="HistoryList">
-          <router-link tag="li" v-for="(item, index) in LotteryRes" :key="index" :to="{ name: 'PaiLie5XiangQing', query: { serialNo: item.serialNo, lotteryId: 'p5', issueNo: item.issueNo } }" class="flex-h">
-            <div class="Icon">
-              <img src="../../../assets/img/icon2.png" class="centerLabel cover" alt="">
-            </div>
-            <span>排列5</span>
-            <div class="flex-item">
-              <div class="Time">
-                <span>开奖日期：{{item.openingDate}}</span>
-                <span>第{{item.issueNo}}期</span>
-              </div>
-              <ul class="Num">
-                <li v-for="(subItem, subIndex) in item.result.split(',')" :key="`Res-${subIndex}`">{{subItem}}</li>
-              </ul>
-            </div>
-          </router-link>
-        </ul>
+        </TabSwiper>
       </div>
-
-    </TabSwiper>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 import TabSwiper from '../../../components/common/TabSwiper'
 const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
 export default {
@@ -131,14 +135,10 @@ export default {
     })
   },
   components: {
+    MainPageContainer,
     TabSwiper
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '排列5开奖' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -146,9 +146,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapIndexActions([
       'GetLotteryRes'
     ]),

src/pages/KaiJiangZhanShi/PaiLie5/page.scss

@@ -1,190 +1,200 @@
 .Page {
-  .Item {
-    .PrizeInfo {
-      padding: 0 0.15rem;
-      > div {
-        padding: 0.12rem 0;
-        border-bottom: 0.01rem solid #f7f7f7;
-        align-items: center;
-        > * {
-          margin-left: 0.15rem;
-          &:first-child {
-            margin-left: 0;
-          }
-        }
-        > .Icon {
-          width: 0.4rem;
-          height: 0.4rem;
-          position: relative;
-          overflow: hidden;
-        }
-        > span {
-          font-size: 0.16rem;
-          font-weight: bold;
-          color: #333;
-        }
-        > .flex-item {
-          > .Time {
-            font-size: 0;
-            white-space: nowrap;
-            > span {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              color: #999;
-              line-height: 0.2rem;
-              margin-left: 0.2rem;
-              &:first-child {
-                margin-left: 0;
-              }
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    .Item {
+      .PrizeInfo {
+        padding: 0 0.15rem;
+        > div {
+          padding: 0.12rem 0;
+          border-bottom: 0.01rem solid #f7f7f7;
+          align-items: center;
+          > * {
+            margin-left: 0.15rem;
+            &:first-child {
+              margin-left: 0;
             }
           }
-          > .Num {
-            font-size: 0;
-            white-space: nowrap;
-            margin-top: 0.1rem;
-            > li {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              width: 0.2rem;
-              height: 0.2rem;
-              line-height: 0.2rem;
-              color: #fff;
-              background: #ff5200;
-              border-radius: 100%;
-              text-align: center;
-              margin-left: 0.05rem;
-              &:first-child {
-                margin-left: 0;
+          > .Icon {
+            width: 0.4rem;
+            height: 0.4rem;
+            position: relative;
+            overflow: hidden;
+          }
+          > span {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #333;
+          }
+          > .flex-item {
+            > .Time {
+              font-size: 0;
+              white-space: nowrap;
+              > span {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                color: #999;
+                line-height: 0.2rem;
+                margin-left: 0.2rem;
+                &:first-child {
+                  margin-left: 0;
+                }
               }
-              &.active {
-                background: #3f63e5;
+            }
+            > .Num {
+              font-size: 0;
+              white-space: nowrap;
+              margin-top: 0.1rem;
+              > li {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                width: 0.2rem;
+                height: 0.2rem;
+                line-height: 0.2rem;
+                color: #fff;
+                background: #ff5200;
+                border-radius: 100%;
+                text-align: center;
+                margin-left: 0.05rem;
+                &:first-child {
+                  margin-left: 0;
+                }
+                &.active {
+                  background: #3f63e5;
+                }
               }
             }
           }
         }
       }
-    }
-    .SaleInfo {
-      margin-top: 0.1rem;
-      align-items: center;
-      > div {
-        font-size: 0;
-        white-space: nowrap;
-        text-align: center;
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 0.12rem;
-          color: #999;
-          line-height: 0.2rem;
-          &:nth-child(2) {
-            color: #333;
-          }
-        }
-      }
-    }
-    .ResList {
-      > span {
-        display: block;
-        text-align: center;
-        font-size: 0.15rem;
-        color: #666;
-        line-height: 0.2rem;
-        margin-top: 0.2rem;
-      }
-      > ul {
-        margin-top: 0.15rem;
-        > li {
-          align-items: center;
-          &:nth-child(2n + 1) {
-            background: #f2f2f2;
-            > span {
-              line-height: 0.3rem;
-            }
-          }
+      .SaleInfo {
+        margin-top: 0.1rem;
+        align-items: center;
+        > div {
+          font-size: 0;
+          white-space: nowrap;
+          text-align: center;
           > span {
+            display: inline-block;
+            vertical-align: middle;
             font-size: 0.12rem;
-            line-height: 0.4rem;
-            text-align: center;
-            color: #666;
+            color: #999;
+            line-height: 0.2rem;
+            &:nth-child(2) {
+              color: #333;
+            }
           }
         }
       }
-      > .Btn {
-        padding: 0 0.15rem;
-        margin-top: 0.5rem;
-        > a {
+      .ResList {
+        > span {
           display: block;
           text-align: center;
-          line-height: 0.42rem;
-          background: #ff5200;
-          border-radius: 0.06rem;
-          color: #fff;
+          font-size: 0.15rem;
+          color: #666;
+          line-height: 0.2rem;
+          margin-top: 0.2rem;
         }
-      }
-    }
-    .HistoryList {
-      padding: 0 0.15rem;
-      > li {
-        padding: 0.12rem 0;
-        border-bottom: 0.01rem solid #f7f7f7;
-        align-items: center;
-        > * {
-          margin-left: 0.15rem;
-          &:first-child {
-            margin-left: 0;
+        > ul {
+          margin-top: 0.15rem;
+          > li {
+            align-items: center;
+            &:nth-child(2n + 1) {
+              background: #f2f2f2;
+              > span {
+                line-height: 0.3rem;
+              }
+            }
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.4rem;
+              text-align: center;
+              color: #666;
+            }
           }
         }
-        > .Icon {
-          width: 0.4rem;
-          height: 0.4rem;
-          position: relative;
-          overflow: hidden;
-        }
-        > span {
-          font-size: 0.16rem;
-          font-weight: bold;
-          color: #333;
+        > .Btn {
+          padding: 0 0.15rem;
+          margin-top: 0.5rem;
+          > a {
+            display: block;
+            text-align: center;
+            line-height: 0.42rem;
+            background: #ff5200;
+            border-radius: 0.06rem;
+            color: #fff;
+          }
         }
-        > .flex-item {
-          > .Time {
-            font-size: 0;
-            white-space: nowrap;
-            > span {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              color: #999;
-              line-height: 0.2rem;
-              margin-left: 0.2rem;
-              &:first-child {
-                margin-left: 0;
-              }
+      }
+      .HistoryList {
+        padding: 0 0.15rem;
+        > li {
+          padding: 0.12rem 0;
+          border-bottom: 0.01rem solid #f7f7f7;
+          align-items: center;
+          > * {
+            margin-left: 0.15rem;
+            &:first-child {
+              margin-left: 0;
             }
           }
-          > .Num {
-            font-size: 0;
-            white-space: nowrap;
-            margin-top: 0.1rem;
-            > li {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              width: 0.2rem;
-              height: 0.2rem;
-              line-height: 0.2rem;
-              color: #fff;
-              background: #ff5200;
-              border-radius: 100%;
-              text-align: center;
-              margin-left: 0.05rem;
-              &:first-child {
-                margin-left: 0;
+          > .Icon {
+            width: 0.4rem;
+            height: 0.4rem;
+            position: relative;
+            overflow: hidden;
+          }
+          > span {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #333;
+          }
+          > .flex-item {
+            > .Time {
+              font-size: 0;
+              white-space: nowrap;
+              > span {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                color: #999;
+                line-height: 0.2rem;
+                margin-left: 0.2rem;
+                &:first-child {
+                  margin-left: 0;
+                }
               }
-              &.active {
-                background: #3f63e5;
+            }
+            > .Num {
+              font-size: 0;
+              white-space: nowrap;
+              margin-top: 0.1rem;
+              > li {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                width: 0.2rem;
+                height: 0.2rem;
+                line-height: 0.2rem;
+                color: #fff;
+                background: #ff5200;
+                border-radius: 100%;
+                text-align: center;
+                margin-left: 0.05rem;
+                &:first-child {
+                  margin-left: 0;
+                }
+                &.active {
+                  background: #3f63e5;
+                }
               }
             }
           }

src/pages/KaiJiangZhanShi/PaiLie5XiangQing/index.vue

@@ -1,75 +1,80 @@
 <template>
   <div class="Page">
-    <!-- 开奖信息 -->
-    <div class="PrizeInfo" v-if="PageData !== null">
-      <div class="flex-h">
-        <div class="Icon">
-          <img src="../../../assets/img/icon2.png" class="centerLabel cover" alt="">
-        </div>
-        <span>排列5</span>
-        <div class="flex-item">
-          <div class="Time">
-            <span>开奖日期：{{PageData.openingDate}}</span>
-            <span>第{{PageData.issueNo}}期</span>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="开奖历史">
+      <div class="PageContainer">
+        <!-- 开奖信息 -->
+        <div class="PrizeInfo" v-if="PageData !== null">
+          <div class="flex-h">
+            <div class="Icon">
+              <img src="../../../assets/img/icon2.png" class="centerLabel cover" alt="">
+            </div>
+            <span>排列5</span>
+            <div class="flex-item">
+              <div class="Time">
+                <span>开奖日期：{{PageData.openingDate}}</span>
+                <span>第{{PageData.issueNo}}期</span>
+              </div>
+              <ul class="Num">
+                <li v-for="(item, index) in PageData.result.split(',')" :key="`Res-${index}`">{{item}}</li>
+              </ul>
+            </div>
           </div>
-          <ul class="Num">
-            <li v-for="(item, index) in PageData.result.split(',')" :key="`Res-${index}`">{{item}}</li>
-          </ul>
         </div>
-      </div>
-    </div>
 
-    <!-- 销售信息 -->
-    <div class="SaleInfo flex-h">
-      <div class="flex-item">
-        <span>本期销售：</span>
-        <span>346015916元</span>
-      </div>
-      <div class="flex-item">
-        <span>奖池滚存：</span>
-        <span>34623015916元</span>
-      </div>
-    </div>
+        <!-- 销售信息 -->
+        <div class="SaleInfo flex-h">
+          <div class="flex-item">
+            <span>本期销售：</span>
+            <span>346015916元</span>
+          </div>
+          <div class="flex-item">
+            <span>奖池滚存：</span>
+            <span>34623015916元</span>
+          </div>
+        </div>
 
-    <!-- 中奖详情 -->
-    <div class="ResList">
-      <span>本期中奖详情</span>
-      <ul>
-        <li class="flex-h">
-          <span class="flex-item">奖项</span>
-          <span class="flex-item">中奖注数（注）</span>
-          <span class="flex-item">单注奖金（元）</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">一等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">6895903</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">二等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">6895</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">三等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">689</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">四等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">68</span>
-        </li>
-      </ul>
-      <div class="Btn">
-        <router-link :to="{ name: 'PaiLie5' }">排列5投注</router-link>
+        <!-- 中奖详情 -->
+        <div class="ResList">
+          <span>本期中奖详情</span>
+          <ul>
+            <li class="flex-h">
+              <span class="flex-item">奖项</span>
+              <span class="flex-item">中奖注数（注）</span>
+              <span class="flex-item">单注奖金（元）</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">一等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">6895903</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">二等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">6895</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">三等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">689</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">四等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">68</span>
+            </li>
+          </ul>
+          <div class="Btn">
+            <router-link :to="{ name: 'PaiLie5' }">排列5投注</router-link>
+          </div>
+        </div>
       </div>
-    </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapIndexState } = createNamespacedHelpers('index')
 export default {
   name: '',
@@ -84,13 +89,9 @@ export default {
     })
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '开奖历史' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -98,9 +99,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     Init () { // 初始化
       let SerialNo = this.$route.query.serialNo
       let IssueNo = this.$route.query.issueNo

src/pages/KaiJiangZhanShi/PaiLie5XiangQing/page.scss

@@ -1,191 +1,200 @@
 .Page {
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  > .PrizeInfo {
-    padding: 0 0.15rem;
-    > div {
-      padding: 0.12rem 0;
-      border-bottom: 0.01rem solid #f7f7f7;
-      align-items: center;
-      > * {
-        margin-left: 0.15rem;
-        &:first-child {
-          margin-left: 0;
-        }
-      }
-      > .Icon {
-        width: 0.4rem;
-        height: 0.4rem;
-        position: relative;
-        overflow: hidden;
-      }
-      > span {
-        font-size: 0.16rem;
-        font-weight: bold;
-        color: #333;
-      }
-      > .flex-item {
-        > .Time {
-          font-size: 0;
-          white-space: nowrap;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            color: #999;
-            line-height: 0.2rem;
-            margin-left: 0.2rem;
-            &:first-child {
-              margin-left: 0;
-            }
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > .PrizeInfo {
+      padding: 0 0.15rem;
+      > div {
+        padding: 0.12rem 0;
+        border-bottom: 0.01rem solid #f7f7f7;
+        align-items: center;
+        > * {
+          margin-left: 0.15rem;
+          &:first-child {
+            margin-left: 0;
           }
         }
-        > .Num {
-          font-size: 0;
-          white-space: nowrap;
-          margin-top: 0.1rem;
-          > li {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            width: 0.2rem;
-            height: 0.2rem;
-            line-height: 0.2rem;
-            color: #fff;
-            background: #ff5200;
-            border-radius: 100%;
-            text-align: center;
-            margin-left: 0.05rem;
-            &:first-child {
-              margin-left: 0;
+        > .Icon {
+          width: 0.4rem;
+          height: 0.4rem;
+          position: relative;
+          overflow: hidden;
+        }
+        > span {
+          font-size: 0.16rem;
+          font-weight: bold;
+          color: #333;
+        }
+        > .flex-item {
+          > .Time {
+            font-size: 0;
+            white-space: nowrap;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              color: #999;
+              line-height: 0.2rem;
+              margin-left: 0.2rem;
+              &:first-child {
+                margin-left: 0;
+              }
             }
-            &.active {
-              background: #3f63e5;
+          }
+          > .Num {
+            font-size: 0;
+            white-space: nowrap;
+            margin-top: 0.1rem;
+            > li {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              width: 0.2rem;
+              height: 0.2rem;
+              line-height: 0.2rem;
+              color: #fff;
+              background: #ff5200;
+              border-radius: 100%;
+              text-align: center;
+              margin-left: 0.05rem;
+              &:first-child {
+                margin-left: 0;
+              }
+              &.active {
+                background: #3f63e5;
+              }
             }
           }
         }
       }
     }
-  }
-  > .SaleInfo {
-    margin-top: 0.1rem;
-    align-items: center;
-    > div {
-      font-size: 0;
-      white-space: nowrap;
-      text-align: center;
-      > span {
-        display: inline-block;
-        vertical-align: middle;
-        font-size: 0.12rem;
-        color: #999;
-        line-height: 0.2rem;
-        &:nth-child(2) {
-          color: #333;
-        }
-      }
-    }
-  }
-  > .ResList {
-    > span {
-      display: block;
-      text-align: center;
-      font-size: 0.15rem;
-      color: #666;
-      line-height: 0.2rem;
-      margin-top: 0.2rem;
-    }
-    > ul {
-      margin-top: 0.15rem;
-      > li {
-        align-items: center;
-        &:nth-child(2n + 1) {
-          background: #f2f2f2;
-          > span {
-            line-height: 0.3rem;
-          }
-        }
+    > .SaleInfo {
+      margin-top: 0.1rem;
+      align-items: center;
+      > div {
+        font-size: 0;
+        white-space: nowrap;
+        text-align: center;
         > span {
+          display: inline-block;
+          vertical-align: middle;
           font-size: 0.12rem;
-          line-height: 0.4rem;
-          text-align: center;
-          color: #666;
+          color: #999;
+          line-height: 0.2rem;
+          &:nth-child(2) {
+            color: #333;
+          }
         }
       }
     }
-    > .Btn {
-      padding: 0 0.15rem;
-      margin-top: 0.5rem;
-      > a {
+    > .ResList {
+      > span {
         display: block;
         text-align: center;
-        line-height: 0.42rem;
-        background: #ff5200;
-        border-radius: 0.06rem;
-        color: #fff;
+        font-size: 0.15rem;
+        color: #666;
+        line-height: 0.2rem;
+        margin-top: 0.2rem;
       }
-    }
-  }
-  > .HistoryList {
-    padding: 0 0.15rem;
-    > li {
-      padding: 0.12rem 0;
-      border-bottom: 0.01rem solid #f7f7f7;
-      align-items: center;
-      > * {
-        margin-left: 0.15rem;
-        &:first-child {
-          margin-left: 0;
+      > ul {
+        margin-top: 0.15rem;
+        > li {
+          align-items: center;
+          &:nth-child(2n + 1) {
+            background: #f2f2f2;
+            > span {
+              line-height: 0.3rem;
+            }
+          }
+          > span {
+            font-size: 0.12rem;
+            line-height: 0.4rem;
+            text-align: center;
+            color: #666;
+          }
         }
       }
-      > .Icon {
-        width: 0.4rem;
-        height: 0.4rem;
-        position: relative;
-        overflow: hidden;
-      }
-      > span {
-        font-size: 0.16rem;
-        font-weight: bold;
-        color: #333;
+      > .Btn {
+        padding: 0 0.15rem;
+        margin-top: 0.5rem;
+        > a {
+          display: block;
+          text-align: center;
+          line-height: 0.42rem;
+          background: #ff5200;
+          border-radius: 0.06rem;
+          color: #fff;
+        }
       }
-      > .flex-item {
-        > .Time {
-          font-size: 0;
-          white-space: nowrap;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            color: #999;
-            line-height: 0.2rem;
-            margin-left: 0.2rem;
-            &:first-child {
-              margin-left: 0;
-            }
+    }
+    > .HistoryList {
+      padding: 0 0.15rem;
+      > li {
+        padding: 0.12rem 0;
+        border-bottom: 0.01rem solid #f7f7f7;
+        align-items: center;
+        > * {
+          margin-left: 0.15rem;
+          &:first-child {
+            margin-left: 0;
           }
         }
-        > .Num {
-          font-size: 0;
-          white-space: nowrap;
-          margin-top: 0.1rem;
-          > li {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            width: 0.2rem;
-            height: 0.2rem;
-            line-height: 0.2rem;
-            color: #fff;
-            background: #ff5200;
-            border-radius: 100%;
-            text-align: center;
-            margin-left: 0.05rem;
-            &:first-child {
-              margin-left: 0;
+        > .Icon {
+          width: 0.4rem;
+          height: 0.4rem;
+          position: relative;
+          overflow: hidden;
+        }
+        > span {
+          font-size: 0.16rem;
+          font-weight: bold;
+          color: #333;
+        }
+        > .flex-item {
+          > .Time {
+            font-size: 0;
+            white-space: nowrap;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              color: #999;
+              line-height: 0.2rem;
+              margin-left: 0.2rem;
+              &:first-child {
+                margin-left: 0;
+              }
             }
-            &.active {
-              background: #3f63e5;
+          }
+          > .Num {
+            font-size: 0;
+            white-space: nowrap;
+            margin-top: 0.1rem;
+            > li {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              width: 0.2rem;
+              height: 0.2rem;
+              line-height: 0.2rem;
+              color: #fff;
+              background: #ff5200;
+              border-radius: 100%;
+              text-align: center;
+              margin-left: 0.05rem;
+              &:first-child {
+                margin-left: 0;
+              }
+              &.active {
+                background: #3f63e5;
+              }
             }
           }
         }

src/pages/KaiJiangZhanShi/ShuangSeQiu/index.vue

@@ -1,112 +1,116 @@
 <template>
   <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="双色球开奖">
+      <div class="PageContainer">
+        <!-- nav -->
+        <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
 
-    <!-- nav -->
-    <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
+          <!-- 最新开奖 -->
+          <div slot="SwiperItem-1" class="Item">
 
-      <!-- 最新开奖 -->
-      <div slot="SwiperItem-1" class="Item">
-
-        <!-- 开奖信息 -->
-        <div class="PrizeInfo" v-if="LotteryRes.length">
-          <div class="flex-h">
-            <div class="Icon">
-              <img src="../../../assets/img/icon5.png" class="centerLabel cover" alt="">
+            <!-- 开奖信息 -->
+            <div class="PrizeInfo" v-if="LotteryRes.length">
+              <div class="flex-h">
+                <div class="Icon">
+                  <img src="../../../assets/img/icon5.png" class="centerLabel cover" alt="">
+                </div>
+                <span>双色球</span>
+                <div class="flex-item">
+                  <div class="Time">
+                    <span>开奖日期：{{LotteryRes[0].openingDate}}</span>
+                    <span>第{{LotteryRes[0].issueNo}}期</span>
+                  </div>
+                  <ul class="Num">
+                    <li v-for="(item, index) in LotteryRes[0].firstResult.split(',')" :key="`First-${index}`">{{item}}</li>
+                    <li v-for="(item, index) in LotteryRes[0].secondResult.split(',')" :key="`Second-${index}`" class="active">{{item}}</li>
+                  </ul>
+                </div>
+              </div>
             </div>
-            <span>双色球</span>
-            <div class="flex-item">
-              <div class="Time">
-                <span>开奖日期：{{LotteryRes[0].openingDate}}</span>
-                <span>第{{LotteryRes[0].issueNo}}期</span>
+
+            <!-- 销售信息 -->
+            <div class="SaleInfo flex-h">
+              <div class="flex-item">
+                <span>本期销售：</span>
+                <span>346015916元</span>
+              </div>
+              <div class="flex-item">
+                <span>奖池滚存：</span>
+                <span>34623015916元</span>
               </div>
-              <ul class="Num">
-                <li v-for="(item, index) in LotteryRes[0].firstResult.split(',')" :key="`First-${index}`">{{item}}</li>
-                <li v-for="(item, index) in LotteryRes[0].secondResult.split(',')" :key="`Second-${index}`" class="active">{{item}}</li>
-              </ul>
             </div>
-          </div>
-        </div>
 
-        <!-- 销售信息 -->
-        <div class="SaleInfo flex-h">
-          <div class="flex-item">
-            <span>本期销售：</span>
-            <span>346015916元</span>
-          </div>
-          <div class="flex-item">
-            <span>奖池滚存：</span>
-            <span>34623015916元</span>
-          </div>
-        </div>
+            <!-- 中奖详情 -->
+            <div class="ResList">
+              <span>本期中奖详情</span>
+              <ul>
+                <li class="flex-h">
+                  <span class="flex-item">奖项</span>
+                  <span class="flex-item">中奖注数（注）</span>
+                  <span class="flex-item">单注奖金（元）</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">一等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">6895903</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">二等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">6895</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">三等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">689</span>
+                </li>
+                <li class="flex-h">
+                  <span class="flex-item">四等奖</span>
+                  <span class="flex-item">8</span>
+                  <span class="flex-item">68</span>
+                </li>
+              </ul>
+              <div class="Btn">
+                <router-link :to="{ name: 'ShuangSeQiu' }">双色球投注</router-link>
+              </div>
+            </div>
 
-        <!-- 中奖详情 -->
-        <div class="ResList">
-          <span>本期中奖详情</span>
-          <ul>
-            <li class="flex-h">
-              <span class="flex-item">奖项</span>
-              <span class="flex-item">中奖注数（注）</span>
-              <span class="flex-item">单注奖金（元）</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">一等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">6895903</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">二等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">6895</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">三等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">689</span>
-            </li>
-            <li class="flex-h">
-              <span class="flex-item">四等奖</span>
-              <span class="flex-item">8</span>
-              <span class="flex-item">68</span>
-            </li>
-          </ul>
-          <div class="Btn">
-            <router-link :to="{ name: 'ShuangSeQiu' }">双色球投注</router-link>
           </div>
-        </div>
 
-      </div>
+          <!-- 走势图 -->
+          <div slot="SwiperItem-2" class="Item">走势图</div>
 
-      <!-- 走势图 -->
-      <div slot="SwiperItem-2" class="Item">走势图</div>
+          <!-- 开奖历史 -->
+          <div slot="SwiperItem-3" class="Item">
+            <ul class="HistoryList">
+              <router-link tag="li" v-for="(item, index) in LotteryRes" :key="index" :to="{ name: 'ShuangSeQiuXiangQing', query: { serialNo: item.serialNo, lotteryId: 'lottery', issueNo: item.issueNo } }" class="flex-h">
+                <div class="Icon">
+                  <img src="../../../assets/img/icon5.png" class="centerLabel cover" alt="">
+                </div>
+                <span>双色球</span>
+                <div class="flex-item">
+                  <div class="Time">
+                    <span>开奖日期：{{item.openingDate}}</span>
+                    <span>第{{item.issueNo}}期</span>
+                  </div>
+                  <ul class="Num">
+                    <li v-for="(subItem, subIndex) in item.firstResult.split(',')" :key="`First-${subIndex}`">{{subItem}}</li>
+                    <li v-for="(subItem, subIndex) in item.secondResult.split(',')" :key="`Second-${subIndex}`" class="active">{{subItem}}</li>
+                  </ul>
+                </div>
+              </router-link>
+            </ul>
+          </div>
 
-      <!-- 开奖历史 -->
-      <div slot="SwiperItem-3" class="Item">
-        <ul class="HistoryList">
-          <router-link tag="li" v-for="(item, index) in LotteryRes" :key="index" :to="{ name: 'ShuangSeQiuXiangQing', query: { serialNo: item.serialNo, lotteryId: 'lottery', issueNo: item.issueNo } }" class="flex-h">
-            <div class="Icon">
-              <img src="../../../assets/img/icon5.png" class="centerLabel cover" alt="">
-            </div>
-            <span>双色球</span>
-            <div class="flex-item">
-              <div class="Time">
-                <span>开奖日期：{{item.openingDate}}</span>
-                <span>第{{item.issueNo}}期</span>
-              </div>
-              <ul class="Num">
-                <li v-for="(subItem, subIndex) in item.firstResult.split(',')" :key="`First-${subIndex}`">{{subItem}}</li>
-                <li v-for="(subItem, subIndex) in item.secondResult.split(',')" :key="`Second-${subIndex}`" class="active">{{subItem}}</li>
-              </ul>
-            </div>
-          </router-link>
-        </ul>
+        </TabSwiper>
       </div>
-
-    </TabSwiper>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 import TabSwiper from '../../../components/common/TabSwiper'
 const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
 export default {
@@ -133,14 +137,10 @@ export default {
     })
   },
   components: {
+    MainPageContainer,
     TabSwiper
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '双色球开奖' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -148,9 +148,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapIndexActions([
       'GetLotteryRes'
     ]),

src/pages/KaiJiangZhanShi/ShuangSeQiu/page.scss

@@ -1,190 +1,200 @@
 .Page {
-  .Item {
-    .PrizeInfo {
-      padding: 0 0.15rem;
-      > div {
-        padding: 0.12rem 0;
-        border-bottom: 0.01rem solid #f7f7f7;
-        align-items: center;
-        > * {
-          margin-left: 0.15rem;
-          &:first-child {
-            margin-left: 0;
-          }
-        }
-        > .Icon {
-          width: 0.4rem;
-          height: 0.4rem;
-          position: relative;
-          overflow: hidden;
-        }
-        > span {
-          font-size: 0.16rem;
-          font-weight: bold;
-          color: #333;
-        }
-        > .flex-item {
-          > .Time {
-            font-size: 0;
-            white-space: nowrap;
-            > span {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              color: #999;
-              line-height: 0.2rem;
-              margin-left: 0.2rem;
-              &:first-child {
-                margin-left: 0;
-              }
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    .Item {
+      .PrizeInfo {
+        padding: 0 0.15rem;
+        > div {
+          padding: 0.12rem 0;
+          border-bottom: 0.01rem solid #f7f7f7;
+          align-items: center;
+          > * {
+            margin-left: 0.15rem;
+            &:first-child {
+              margin-left: 0;
             }
           }
-          > .Num {
-            font-size: 0;
-            white-space: nowrap;
-            margin-top: 0.1rem;
-            > li {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              width: 0.2rem;
-              height: 0.2rem;
-              line-height: 0.2rem;
-              color: #fff;
-              background: #ff5200;
-              border-radius: 100%;
-              text-align: center;
-              margin-left: 0.05rem;
-              &:first-child {
-                margin-left: 0;
+          > .Icon {
+            width: 0.4rem;
+            height: 0.4rem;
+            position: relative;
+            overflow: hidden;
+          }
+          > span {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #333;
+          }
+          > .flex-item {
+            > .Time {
+              font-size: 0;
+              white-space: nowrap;
+              > span {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                color: #999;
+                line-height: 0.2rem;
+                margin-left: 0.2rem;
+                &:first-child {
+                  margin-left: 0;
+                }
               }
-              &.active {
-                background: #3f63e5;
+            }
+            > .Num {
+              font-size: 0;
+              white-space: nowrap;
+              margin-top: 0.1rem;
+              > li {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                width: 0.2rem;
+                height: 0.2rem;
+                line-height: 0.2rem;
+                color: #fff;
+                background: #ff5200;
+                border-radius: 100%;
+                text-align: center;
+                margin-left: 0.05rem;
+                &:first-child {
+                  margin-left: 0;
+                }
+                &.active {
+                  background: #3f63e5;
+                }
               }
             }
           }
         }
       }
-    }
-    .SaleInfo {
-      margin-top: 0.1rem;
-      align-items: center;
-      > div {
-        font-size: 0;
-        white-space: nowrap;
-        text-align: center;
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 0.12rem;
-          color: #999;
-          line-height: 0.2rem;
-          &:nth-child(2) {
-            color: #333;
-          }
-        }
-      }
-    }
-    .ResList {
-      > span {
-        display: block;
-        text-align: center;
-        font-size: 0.15rem;
-        color: #666;
-        line-height: 0.2rem;
-        margin-top: 0.2rem;
-      }
-      > ul {
-        margin-top: 0.15rem;
-        > li {
-          align-items: center;
-          &:nth-child(2n + 1) {
-            background: #f2f2f2;
-            > span {
-              line-height: 0.3rem;
-            }
-          }
+      .SaleInfo {
+        margin-top: 0.1rem;
+        align-items: center;
+        > div {
+          font-size: 0;
+          white-space: nowrap;
+          text-align: center;
           > span {
+            display: inline-block;
+            vertical-align: middle;
             font-size: 0.12rem;
-            line-height: 0.4rem;
-            text-align: center;
-            color: #666;
+            color: #999;
+            line-height: 0.2rem;
+            &:nth-child(2) {
+              color: #333;
+            }
           }
         }
       }
-      > .Btn {
-        padding: 0 0.15rem;
-        margin-top: 0.5rem;
-        > a {
+      .ResList {
+        > span {
           display: block;
           text-align: center;
-          line-height: 0.42rem;
-          background: #ff5200;
-          border-radius: 0.06rem;
-          color: #fff;
+          font-size: 0.15rem;
+          color: #666;
+          line-height: 0.2rem;
+          margin-top: 0.2rem;
         }
-      }
-    }
-    .HistoryList {
-      padding: 0 0.15rem;
-      > li {
-        padding: 0.12rem 0;
-        border-bottom: 0.01rem solid #f7f7f7;
-        align-items: center;
-        > * {
-          margin-left: 0.15rem;
-          &:first-child {
-            margin-left: 0;
+        > ul {
+          margin-top: 0.15rem;
+          > li {
+            align-items: center;
+            &:nth-child(2n + 1) {
+              background: #f2f2f2;
+              > span {
+                line-height: 0.3rem;
+              }
+            }
+            > span {
+              font-size: 0.12rem;
+              line-height: 0.4rem;
+              text-align: center;
+              color: #666;
+            }
           }
         }
-        > .Icon {
-          width: 0.4rem;
-          height: 0.4rem;
-          position: relative;
-          overflow: hidden;
-        }
-        > span {
-          font-size: 0.16rem;
-          font-weight: bold;
-          color: #333;
+        > .Btn {
+          padding: 0 0.15rem;
+          margin-top: 0.5rem;
+          > a {
+            display: block;
+            text-align: center;
+            line-height: 0.42rem;
+            background: #ff5200;
+            border-radius: 0.06rem;
+            color: #fff;
+          }
         }
-        > .flex-item {
-          > .Time {
-            font-size: 0;
-            white-space: nowrap;
-            > span {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              color: #999;
-              line-height: 0.2rem;
-              margin-left: 0.2rem;
-              &:first-child {
-                margin-left: 0;
-              }
+      }
+      .HistoryList {
+        padding: 0 0.15rem;
+        > li {
+          padding: 0.12rem 0;
+          border-bottom: 0.01rem solid #f7f7f7;
+          align-items: center;
+          > * {
+            margin-left: 0.15rem;
+            &:first-child {
+              margin-left: 0;
             }
           }
-          > .Num {
-            font-size: 0;
-            white-space: nowrap;
-            margin-top: 0.1rem;
-            > li {
-              display: inline-block;
-              vertical-align: middle;
-              font-size: 0.1rem;
-              width: 0.2rem;
-              height: 0.2rem;
-              line-height: 0.2rem;
-              color: #fff;
-              background: #ff5200;
-              border-radius: 100%;
-              text-align: center;
-              margin-left: 0.05rem;
-              &:first-child {
-                margin-left: 0;
+          > .Icon {
+            width: 0.4rem;
+            height: 0.4rem;
+            position: relative;
+            overflow: hidden;
+          }
+          > span {
+            font-size: 0.16rem;
+            font-weight: bold;
+            color: #333;
+          }
+          > .flex-item {
+            > .Time {
+              font-size: 0;
+              white-space: nowrap;
+              > span {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                color: #999;
+                line-height: 0.2rem;
+                margin-left: 0.2rem;
+                &:first-child {
+                  margin-left: 0;
+                }
               }
-              &.active {
-                background: #3f63e5;
+            }
+            > .Num {
+              font-size: 0;
+              white-space: nowrap;
+              margin-top: 0.1rem;
+              > li {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                width: 0.2rem;
+                height: 0.2rem;
+                line-height: 0.2rem;
+                color: #fff;
+                background: #ff5200;
+                border-radius: 100%;
+                text-align: center;
+                margin-left: 0.05rem;
+                &:first-child {
+                  margin-left: 0;
+                }
+                &.active {
+                  background: #3f63e5;
+                }
               }
             }
           }

src/pages/KaiJiangZhanShi/ShuangSeQiuXiangQing/index.vue

@@ -1,76 +1,81 @@
 <template>
   <div class="Page">
-    <!-- 开奖信息 -->
-    <div class="PrizeInfo" v-if="PageData !== null">
-      <div class="flex-h">
-        <div class="Icon">
-          <img src="../../../assets/img/icon5.png" class="centerLabel cover" alt="">
-        </div>
-        <span>双色球</span>
-        <div class="flex-item">
-          <div class="Time">
-            <span>开奖日期：{{PageData.openingDate}}</span>
-            <span>第{{PageData.issueNo}}期</span>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="开奖历史">
+      <div class="PageContainer">
+        <!-- 开奖信息 -->
+        <div class="PrizeInfo" v-if="PageData !== null">
+          <div class="flex-h">
+            <div class="Icon">
+              <img src="../../../assets/img/icon5.png" class="centerLabel cover" alt="">
+            </div>
+            <span>双色球</span>
+            <div class="flex-item">
+              <div class="Time">
+                <span>开奖日期：{{PageData.openingDate}}</span>
+                <span>第{{PageData.issueNo}}期</span>
+              </div>
+              <ul class="Num">
+                <li v-for="(item, index) in PageData.firstResult.split(',')" :key="`First-${index}`">{{item}}</li>
+                <li v-for="(item, index) in PageData.secondResult.split(',')" :key="`Second-${index}`" class="active">{{item}}</li>
+              </ul>
+            </div>
           </div>
-          <ul class="Num">
-            <li v-for="(item, index) in PageData.firstResult.split(',')" :key="`First-${index}`">{{item}}</li>
-            <li v-for="(item, index) in PageData.secondResult.split(',')" :key="`Second-${index}`" class="active">{{item}}</li>
-          </ul>
         </div>
-      </div>
-    </div>
 
-    <!-- 销售信息 -->
-    <div class="SaleInfo flex-h">
-      <div class="flex-item">
-        <span>本期销售：</span>
-        <span>346015916元</span>
-      </div>
-      <div class="flex-item">
-        <span>奖池滚存：</span>
-        <span>34623015916元</span>
-      </div>
-    </div>
+        <!-- 销售信息 -->
+        <div class="SaleInfo flex-h">
+          <div class="flex-item">
+            <span>本期销售：</span>
+            <span>346015916元</span>
+          </div>
+          <div class="flex-item">
+            <span>奖池滚存：</span>
+            <span>34623015916元</span>
+          </div>
+        </div>
 
-    <!-- 中奖详情 -->
-    <div class="ResList">
-      <span>本期中奖详情</span>
-      <ul>
-        <li class="flex-h">
-          <span class="flex-item">奖项</span>
-          <span class="flex-item">中奖注数（注）</span>
-          <span class="flex-item">单注奖金（元）</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">一等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">6895903</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">二等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">6895</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">三等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">689</span>
-        </li>
-        <li class="flex-h">
-          <span class="flex-item">四等奖</span>
-          <span class="flex-item">8</span>
-          <span class="flex-item">68</span>
-        </li>
-      </ul>
-      <div class="Btn">
-        <router-link :to="{ name: 'ShuangSeQiu' }">双色球投注</router-link>
+        <!-- 中奖详情 -->
+        <div class="ResList">
+          <span>本期中奖详情</span>
+          <ul>
+            <li class="flex-h">
+              <span class="flex-item">奖项</span>
+              <span class="flex-item">中奖注数（注）</span>
+              <span class="flex-item">单注奖金（元）</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">一等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">6895903</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">二等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">6895</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">三等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">689</span>
+            </li>
+            <li class="flex-h">
+              <span class="flex-item">四等奖</span>
+              <span class="flex-item">8</span>
+              <span class="flex-item">68</span>
+            </li>
+          </ul>
+          <div class="Btn">
+            <router-link :to="{ name: 'ShuangSeQiu' }">双色球投注</router-link>
+          </div>
+        </div>
       </div>
-    </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapIndexState } = createNamespacedHelpers('index')
 export default {
   name: '',
@@ -85,13 +90,9 @@ export default {
     })
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '开奖历史' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -99,9 +100,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     Init () { // 初始化
       let SerialNo = this.$route.query.serialNo
       let IssueNo = this.$route.query.issueNo

src/pages/KaiJiangZhanShi/ShuangSeQiuXiangQing/page.scss

@@ -1,191 +1,200 @@
 .Page {
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  > .PrizeInfo {
-    padding: 0 0.15rem;
-    > div {
-      padding: 0.12rem 0;
-      border-bottom: 0.01rem solid #f7f7f7;
-      align-items: center;
-      > * {
-        margin-left: 0.15rem;
-        &:first-child {
-          margin-left: 0;
-        }
-      }
-      > .Icon {
-        width: 0.4rem;
-        height: 0.4rem;
-        position: relative;
-        overflow: hidden;
-      }
-      > span {
-        font-size: 0.16rem;
-        font-weight: bold;
-        color: #333;
-      }
-      > .flex-item {
-        > .Time {
-          font-size: 0;
-          white-space: nowrap;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            color: #999;
-            line-height: 0.2rem;
-            margin-left: 0.2rem;
-            &:first-child {
-              margin-left: 0;
-            }
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > .PrizeInfo {
+      padding: 0 0.15rem;
+      > div {
+        padding: 0.12rem 0;
+        border-bottom: 0.01rem solid #f7f7f7;
+        align-items: center;
+        > * {
+          margin-left: 0.15rem;
+          &:first-child {
+            margin-left: 0;
           }
         }
-        > .Num {
-          font-size: 0;
-          white-space: nowrap;
-          margin-top: 0.1rem;
-          > li {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            width: 0.2rem;
-            height: 0.2rem;
-            line-height: 0.2rem;
-            color: #fff;
-            background: #ff5200;
-            border-radius: 100%;
-            text-align: center;
-            margin-left: 0.05rem;
-            &:first-child {
-              margin-left: 0;
+        > .Icon {
+          width: 0.4rem;
+          height: 0.4rem;
+          position: relative;
+          overflow: hidden;
+        }
+        > span {
+          font-size: 0.16rem;
+          font-weight: bold;
+          color: #333;
+        }
+        > .flex-item {
+          > .Time {
+            font-size: 0;
+            white-space: nowrap;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              color: #999;
+              line-height: 0.2rem;
+              margin-left: 0.2rem;
+              &:first-child {
+                margin-left: 0;
+              }
             }
-            &.active {
-              background: #3f63e5;
+          }
+          > .Num {
+            font-size: 0;
+            white-space: nowrap;
+            margin-top: 0.1rem;
+            > li {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              width: 0.2rem;
+              height: 0.2rem;
+              line-height: 0.2rem;
+              color: #fff;
+              background: #ff5200;
+              border-radius: 100%;
+              text-align: center;
+              margin-left: 0.05rem;
+              &:first-child {
+                margin-left: 0;
+              }
+              &.active {
+                background: #3f63e5;
+              }
             }
           }
         }
       }
     }
-  }
-  > .SaleInfo {
-    margin-top: 0.1rem;
-    align-items: center;
-    > div {
-      font-size: 0;
-      white-space: nowrap;
-      text-align: center;
-      > span {
-        display: inline-block;
-        vertical-align: middle;
-        font-size: 0.12rem;
-        color: #999;
-        line-height: 0.2rem;
-        &:nth-child(2) {
-          color: #333;
-        }
-      }
-    }
-  }
-  > .ResList {
-    > span {
-      display: block;
-      text-align: center;
-      font-size: 0.15rem;
-      color: #666;
-      line-height: 0.2rem;
-      margin-top: 0.2rem;
-    }
-    > ul {
-      margin-top: 0.15rem;
-      > li {
-        align-items: center;
-        &:nth-child(2n + 1) {
-          background: #f2f2f2;
-          > span {
-            line-height: 0.3rem;
-          }
-        }
+    > .SaleInfo {
+      margin-top: 0.1rem;
+      align-items: center;
+      > div {
+        font-size: 0;
+        white-space: nowrap;
+        text-align: center;
         > span {
+          display: inline-block;
+          vertical-align: middle;
           font-size: 0.12rem;
-          line-height: 0.4rem;
-          text-align: center;
-          color: #666;
+          color: #999;
+          line-height: 0.2rem;
+          &:nth-child(2) {
+            color: #333;
+          }
         }
       }
     }
-    > .Btn {
-      padding: 0 0.15rem;
-      margin-top: 0.5rem;
-      > a {
+    > .ResList {
+      > span {
         display: block;
         text-align: center;
-        line-height: 0.42rem;
-        background: #ff5200;
-        border-radius: 0.06rem;
-        color: #fff;
+        font-size: 0.15rem;
+        color: #666;
+        line-height: 0.2rem;
+        margin-top: 0.2rem;
       }
-    }
-  }
-  > .HistoryList {
-    padding: 0 0.15rem;
-    > li {
-      padding: 0.12rem 0;
-      border-bottom: 0.01rem solid #f7f7f7;
-      align-items: center;
-      > * {
-        margin-left: 0.15rem;
-        &:first-child {
-          margin-left: 0;
+      > ul {
+        margin-top: 0.15rem;
+        > li {
+          align-items: center;
+          &:nth-child(2n + 1) {
+            background: #f2f2f2;
+            > span {
+              line-height: 0.3rem;
+            }
+          }
+          > span {
+            font-size: 0.12rem;
+            line-height: 0.4rem;
+            text-align: center;
+            color: #666;
+          }
         }
       }
-      > .Icon {
-        width: 0.4rem;
-        height: 0.4rem;
-        position: relative;
-        overflow: hidden;
-      }
-      > span {
-        font-size: 0.16rem;
-        font-weight: bold;
-        color: #333;
+      > .Btn {
+        padding: 0 0.15rem;
+        margin-top: 0.5rem;
+        > a {
+          display: block;
+          text-align: center;
+          line-height: 0.42rem;
+          background: #ff5200;
+          border-radius: 0.06rem;
+          color: #fff;
+        }
       }
-      > .flex-item {
-        > .Time {
-          font-size: 0;
-          white-space: nowrap;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            color: #999;
-            line-height: 0.2rem;
-            margin-left: 0.2rem;
-            &:first-child {
-              margin-left: 0;
-            }
+    }
+    > .HistoryList {
+      padding: 0 0.15rem;
+      > li {
+        padding: 0.12rem 0;
+        border-bottom: 0.01rem solid #f7f7f7;
+        align-items: center;
+        > * {
+          margin-left: 0.15rem;
+          &:first-child {
+            margin-left: 0;
           }
         }
-        > .Num {
-          font-size: 0;
-          white-space: nowrap;
-          margin-top: 0.1rem;
-          > li {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            width: 0.2rem;
-            height: 0.2rem;
-            line-height: 0.2rem;
-            color: #fff;
-            background: #ff5200;
-            border-radius: 100%;
-            text-align: center;
-            margin-left: 0.05rem;
-            &:first-child {
-              margin-left: 0;
+        > .Icon {
+          width: 0.4rem;
+          height: 0.4rem;
+          position: relative;
+          overflow: hidden;
+        }
+        > span {
+          font-size: 0.16rem;
+          font-weight: bold;
+          color: #333;
+        }
+        > .flex-item {
+          > .Time {
+            font-size: 0;
+            white-space: nowrap;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              color: #999;
+              line-height: 0.2rem;
+              margin-left: 0.2rem;
+              &:first-child {
+                margin-left: 0;
+              }
             }
-            &.active {
-              background: #3f63e5;
+          }
+          > .Num {
+            font-size: 0;
+            white-space: nowrap;
+            margin-top: 0.1rem;
+            > li {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              width: 0.2rem;
+              height: 0.2rem;
+              line-height: 0.2rem;
+              color: #fff;
+              background: #ff5200;
+              border-radius: 100%;
+              text-align: center;
+              margin-left: 0.05rem;
+              &:first-child {
+                margin-left: 0;
+              }
+              &.active {
+                background: #3f63e5;
+              }
             }
           }
         }

src/pages/KaiJiangZhanShi/ZuQiu/index.vue

@@ -1,139 +1,141 @@
 <template>
-  <div class="Page flex-v">
-
-    <!-- 开奖日期 -->
-    <div class="Time">
-      <div class="Icon">
-        <img src="../../../assets/img/icon3.png" class="centerLabel contain" alt="">
-      </div>
-      <span>20200815</span>
-      <span>星期五</span>
-    </div>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="足球开奖">
+      <div class="PageContainer flex-v">
+        <!-- 开奖日期 -->
+        <div class="Time">
+          <div class="Icon">
+            <img src="../../../assets/img/icon3.png" class="centerLabel contain" alt="">
+          </div>
+          <span>20200815</span>
+          <span>星期五</span>
+        </div>
 
-    <div class="flex-item">
-      <div>
+        <div class="flex-item">
+          <div>
 
-        <!-- nav -->
-        <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
+            <!-- nav -->
+            <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
 
-          <!-- 胜负 -->
-          <div slot="SwiperItem-1" class="Item">
-            <ul>
-              <li v-for="(item, index) in 5" :key="index" class="flex-h">
-                <div class="From">
-                  <span>NBA</span>
-                  <span>301</span>
-                </div>
-                <div class="flex-item flex-h">
-                  <div class="flex-item">
-                    <span>掘金</span>
-                  </div>
-                  <div class="flex-item">
-                    <span class="Small">胜</span>
-                    <span class="Big">109:117</span>
-                  </div>
-                  <div class="flex-item">
-                    <span>猛龙</span>
-                  </div>
+              <!-- 胜负 -->
+              <div slot="SwiperItem-1" class="Item">
+                <ul>
+                  <li v-for="(item, index) in 5" :key="index" class="flex-h">
+                    <div class="From">
+                      <span>NBA</span>
+                      <span>301</span>
+                    </div>
+                    <div class="flex-item flex-h">
+                      <div class="flex-item">
+                        <span>掘金</span>
+                      </div>
+                      <div class="flex-item">
+                        <span class="Small">胜</span>
+                        <span class="Big">109:117</span>
+                      </div>
+                      <div class="flex-item">
+                        <span>猛龙</span>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+                <div>
+                  <a>竞彩足球投注</a>
                 </div>
-              </li>
-            </ul>
-            <div>
-              <a>竞彩足球投注</a>
-            </div>
-          </div>
+              </div>
 
-          <!-- 让分胜负 -->
-          <div slot="SwiperItem-2" class="Item">
-            <ul>
-              <li v-for="(item, index) in 5" :key="index" class="flex-h">
-                <div class="From">
-                  <span>NBA</span>
-                  <span>301</span>
-                </div>
-                <div class="flex-item flex-h">
-                  <div class="flex-item">
-                    <span>掘金</span>
-                  </div>
-                  <div class="flex-item">
-                    <span class="Small">胜</span>
-                    <span class="Big">109:117</span>
-                  </div>
-                  <div class="flex-item">
-                    <span>猛龙</span>
-                  </div>
+              <!-- 让分胜负 -->
+              <div slot="SwiperItem-2" class="Item">
+                <ul>
+                  <li v-for="(item, index) in 5" :key="index" class="flex-h">
+                    <div class="From">
+                      <span>NBA</span>
+                      <span>301</span>
+                    </div>
+                    <div class="flex-item flex-h">
+                      <div class="flex-item">
+                        <span>掘金</span>
+                      </div>
+                      <div class="flex-item">
+                        <span class="Small">胜</span>
+                        <span class="Big">109:117</span>
+                      </div>
+                      <div class="flex-item">
+                        <span>猛龙</span>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+                <div>
+                  <a>竞彩足球投注</a>
                 </div>
-              </li>
-            </ul>
-            <div>
-              <a>竞彩足球投注</a>
-            </div>
-          </div>
+              </div>
 
-          <!-- 胜分差 -->
-          <div slot="SwiperItem-3" class="Item">
-            <ul>
-              <li v-for="(item, index) in 5" :key="index" class="flex-h">
-                <div class="From">
-                  <span>NBA</span>
-                  <span>301</span>
+              <!-- 胜分差 -->
+              <div slot="SwiperItem-3" class="Item">
+                <ul>
+                  <li v-for="(item, index) in 5" :key="index" class="flex-h">
+                    <div class="From">
+                      <span>NBA</span>
+                      <span>301</span>
+                    </div>
+                    <div class="flex-item flex-h">
+                      <div class="flex-item">
+                        <span>掘金</span>
+                      </div>
+                      <div class="flex-item">
+                        <span class="Small">胜</span>
+                        <span class="Big">109:117</span>
+                      </div>
+                      <div class="flex-item">
+                        <span>猛龙</span>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+                <div>
+                  <a>竞彩足球投注</a>
                 </div>
-                <div class="flex-item flex-h">
-                  <div class="flex-item">
-                    <span>掘金</span>
-                  </div>
-                  <div class="flex-item">
-                    <span class="Small">胜</span>
-                    <span class="Big">109:117</span>
-                  </div>
-                  <div class="flex-item">
-                    <span>猛龙</span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <div>
-              <a>竞彩足球投注</a>
-            </div>
-          </div>
+              </div>
 
-          <!-- 大小分 -->
-          <div slot="SwiperItem-4" class="Item">
-            <ul>
-              <li v-for="(item, index) in 5" :key="index" class="flex-h">
-                <div class="From">
-                  <span>NBA</span>
-                  <span>301</span>
-                </div>
-                <div class="flex-item flex-h">
-                  <div class="flex-item">
-                    <span>掘金</span>
-                  </div>
-                  <div class="flex-item">
-                    <span class="Small">胜</span>
-                    <span class="Big">109:117</span>
-                  </div>
-                  <div class="flex-item">
-                    <span>猛龙</span>
-                  </div>
+              <!-- 大小分 -->
+              <div slot="SwiperItem-4" class="Item">
+                <ul>
+                  <li v-for="(item, index) in 5" :key="index" class="flex-h">
+                    <div class="From">
+                      <span>NBA</span>
+                      <span>301</span>
+                    </div>
+                    <div class="flex-item flex-h">
+                      <div class="flex-item">
+                        <span>掘金</span>
+                      </div>
+                      <div class="flex-item">
+                        <span class="Small">胜</span>
+                        <span class="Big">109:117</span>
+                      </div>
+                      <div class="flex-item">
+                        <span>猛龙</span>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+                <div>
+                  <a>竞彩足球投注</a>
                 </div>
-              </li>
-            </ul>
-            <div>
-              <a>竞彩足球投注</a>
-            </div>
-          </div>
+              </div>
 
-        </TabSwiper>
+            </TabSwiper>
 
+          </div>
+        </div>
       </div>
-    </div>
-
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
 import TabSwiper from '../../../components/common/TabSwiper'
 export default {
   name: '',
@@ -150,23 +152,16 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer,
     TabSwiper
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '足球开奖' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     TabChange (e) { // nav切换
 
     },

src/pages/KaiJiangZhanShi/ZuQiu/page.scss

@@ -1,87 +1,97 @@
 .Page {
-  > .Time {
-    font-size: 0;
-    white-space: nowrap;
-    border-bottom: 0.01rem solid #f7f7f7;
-    > * {
-      vertical-align: middle;
-      display: inline-block;
-      margin-left: 0.15rem;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    > .Time {
+      font-size: 0;
+      white-space: nowrap;
+      border-bottom: 0.01rem solid #f7f7f7;
+      > * {
+        vertical-align: middle;
+        display: inline-block;
+        margin-left: 0.15rem;
+      }
+      > .Icon {
+        width: 0.16rem;
+        height: 0.16rem;
+        position: relative;
+        overflow: hidden;
+      }
+      > span {
+        font-size: 0.12rem;
+        line-height: 0.28rem;
+        color: #999;
+      }
     }
-    > .Icon {
-      width: 0.16rem;
-      height: 0.16rem;
+    > .flex-item {
       position: relative;
       overflow: hidden;
-    }
-    > span {
-      font-size: 0.12rem;
-      line-height: 0.28rem;
-      color: #999;
-    }
-  }
-  > .flex-item {
-    position: relative;
-    overflow: hidden;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      .Item {
-        > ul {
-          padding: 0 0.15rem;
-          > li {
-            border-bottom: 0.01rem solid #f7f7f7;
-            padding: 0.15rem 0;
-            > .From {
-              margin-right: 0.5rem;
-              > span {
-                display: block;
-                text-align: center;
-                font-size: 0.12rem;
-                line-height: 0.2rem;
-                color: #666;
-              }
-            }
-            > .flex-item {
-              align-items: center;
-              > div {
-                margin-left: 0.1rem;
+      > div {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        .Item {
+          > ul {
+            padding: 0 0.15rem;
+            > li {
+              border-bottom: 0.01rem solid #f7f7f7;
+              padding: 0.15rem 0;
+              > .From {
+                margin-right: 0.5rem;
                 > span {
                   display: block;
                   text-align: center;
                   font-size: 0.12rem;
-                  color: #333;
                   line-height: 0.2rem;
-                  &.Small {
-                    font-size: 0.1rem;
-                    color: #ff5200;
-                    &.active {
-                      color: #3f63e5;
+                  color: #666;
+                }
+              }
+              > .flex-item {
+                align-items: center;
+                > div {
+                  margin-left: 0.1rem;
+                  > span {
+                    display: block;
+                    text-align: center;
+                    font-size: 0.12rem;
+                    color: #333;
+                    line-height: 0.2rem;
+                    &.Small {
+                      font-size: 0.1rem;
+                      color: #ff5200;
+                      &.active {
+                        color: #3f63e5;
+                      }
+                    }
+                    &.Big {
+                      font-size: 0.14rem;
+                      font-weight: bold;
                     }
-                  }
-                  &.Big {
-                    font-size: 0.14rem;
-                    font-weight: bold;
                   }
                 }
               }
             }
           }
-        }
-        > div {
-          padding: 0 0.15rem;
-          margin-top: 0.5rem;
-          > a {
-            font-size: 0.16rem;
-            display: block;
-            text-align: center;
-            line-height: 0.42rem;
-            border-radius: 0.06rem;
-            background: #ff5200;
-            color: #fff;
+          > div {
+            padding: 0 0.15rem;
+            margin-top: 0.5rem;
+            > a {
+              font-size: 0.16rem;
+              display: block;
+              text-align: center;
+              line-height: 0.42rem;
+              border-radius: 0.06rem;
+              background: #ff5200;
+              color: #fff;
+            }
           }
         }
       }

src/pages/Register/index.vue

@@ -66,7 +66,7 @@
 
 <script>
 import md5 from 'js-md5'
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import { createNamespacedHelpers } from 'vuex'
 const { mapActions: mapUserActions } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -86,7 +86,6 @@ export default {
   components: {
   },
   created () {
-    this.EditMainData([])
     this.Init()
   },
   mounted () {
@@ -94,9 +93,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserActions([
       'UserRegister',
       'GetRegPhoneCode',

src/pages/SignIn/index.vue

@@ -48,7 +48,7 @@
 
 <script>
 import md5 from 'js-md5'
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -67,7 +67,6 @@ export default {
   components: {
   },
   created () {
-    this.EditMainData([])
   },
   mounted () {
     this.$nextTick(() => {
@@ -77,9 +76,6 @@ export default {
     ...mapUserActions([
       'SignIn'
     ]),
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ToSignIn () { // 登录
       if (this.Phone === '' || this.Password === '' || this.DataLock) return
       this.DataLock = true

src/pages/WoDe/AnQuanZhongXin/BangDingShouJi/index.vue

@@ -1,33 +1,37 @@
 <template>
   <div class="Page">
-    <ul>
-      <li class="flex-h">
-        <i class="iconfont iconshouji"></i>
-        <div class="flex-item">
-          <div>
-            <input type="number" placeholder="请输入您的手机号码">
-          </div>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="手机号码">
+      <div class="PageContainer">
+        <ul>
+          <li class="flex-h">
+            <i class="iconfont iconshouji"></i>
+            <div class="flex-item">
+              <div>
+                <input type="number" placeholder="请输入您的手机号码">
+              </div>
+            </div>
+          </li>
+          <li class="flex-h">
+            <i class="iconfont iconmima"></i>
+            <div class="flex-item">
+              <div>
+                <input type="number" placeholder="请输入验证码">
+              </div>
+            </div>
+            <a>获取验证码</a>
+            <span>59s后重新获取</span>
+          </li>
+        </ul>
+        <div class="Btn">
+          <a>立即绑定</a>
         </div>
-      </li>
-      <li class="flex-h">
-        <i class="iconfont iconmima"></i>
-        <div class="flex-item">
-          <div>
-            <input type="number" placeholder="请输入验证码">
-          </div>
-        </div>
-        <a>获取验证码</a>
-        <span>59s后重新获取</span>
-      </li>
-    </ul>
-    <div class="Btn">
-      <a>立即绑定</a>
-    </div>
+      </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import MainPageContainer from '../../../../components/common/MainPageContainer'
 export default {
   name: '',
   data () {
@@ -37,22 +41,15 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '手机号码' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ])
   }
 }
 </script>

src/pages/WoDe/AnQuanZhongXin/BangDingShouJi/page.scss

@@ -1,60 +1,69 @@
 .Page {
   background: #f2f2f2;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  > ul {
-    > li {
-      background: #fff;
-      padding: 0.1rem 0.15rem;
-      position: relative;
-      overflow: hidden;
-      margin-top: 0.1rem;
-      align-items: center;
-      > * {
-        margin-left: 0.05rem;
-        &:first-child {
-          margin-left: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > ul {
+      > li {
+        background: #fff;
+        padding: 0.1rem 0.15rem;
+        position: relative;
+        overflow: hidden;
+        margin-top: 0.1rem;
+        align-items: center;
+        > * {
+          margin-left: 0.05rem;
+          &:first-child {
+            margin-left: 0;
+          }
+        }
+        > i {
+          font-size: 0.18rem;
+          line-height: 0.3rem;
+          color: #ff5200;
         }
-      }
-      > i {
-        font-size: 0.18rem;
-        line-height: 0.3rem;
-        color: #ff5200;
-      }
-      > div {
         > div {
-          width: 100%;
-          position: relative;
-          overflow: hidden;
-          > input {
+          > div {
             width: 100%;
-            display: block;
-            font-size: 0.14rem;
-            line-height: 0.2rem;
+            position: relative;
+            overflow: hidden;
+            > input {
+              width: 100%;
+              display: block;
+              font-size: 0.14rem;
+              line-height: 0.2rem;
+            }
           }
         }
+        > a {
+          font-size: 0.14rem;
+          color: #ff5200;
+        }
+        > span {
+          font-size: 0.14rem;
+          color: #ccc;
+        }
       }
+    }
+    > .Btn {
+      padding: 0 0.15rem;
+      margin-top: 0.5rem;
       > a {
-        font-size: 0.14rem;
-        color: #ff5200;
-      }
-      > span {
-        font-size: 0.14rem;
-        color: #ccc;
+        display: block;
+        font-size: 0.16rem;
+        color: #fff;
+        background: #ff5200;
+        line-height: 0.42rem;
+        border-radius: 0.06rem;
+        text-align: center;
       }
     }
   }
-  > .Btn {
-    padding: 0 0.15rem;
-    margin-top: 0.5rem;
-    > a {
-      display: block;
-      font-size: 0.16rem;
-      color: #fff;
-      background: #ff5200;
-      line-height: 0.42rem;
-      border-radius: 0.06rem;
-      text-align: center;
-    }
-  }
 }

src/pages/WoDe/AnQuanZhongXin/SubIndex/index.vue

@@ -1,33 +1,38 @@
 <template>
   <div class="Page">
-    <ul>
-      <router-link tag="li" :to="{ name: 'YaoQingZhuCe' }" class="flex-h">
-        <span class="flex-item">邀请注册</span>
-        <i class="iconfont iconjiantouright"></i>
-      </router-link>
-      <li class="flex-h">
-        <span class="flex-item">绑定微信</span>
-        <i class="iconfont iconjinggao"></i>
-        <span>未绑定</span>
-        <i class="iconfont iconjiantouright"></i>
-      </li>
-      <li class="flex-h">
-        <span class="flex-item">绑定支付宝</span>
-        <i class="iconfont iconjinggao"></i>
-        <span>未绑定</span>
-        <i class="iconfont iconjiantouright"></i>
-      </li>
-      <router-link tag="li" :to="{ name: 'BangDingShouJi' }" class="flex-h">
-        <span class="flex-item">绑定手机号</span>
-        <i class="iconfont iconjinggao"></i>
-        <span>未绑定</span>
-        <i class="iconfont iconjiantouright"></i>
-      </router-link>
-    </ul>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="安全中心">
+      <div class="PageContainer">
+        <ul>
+          <router-link tag="li" :to="{ name: 'YaoQingZhuCe' }" class="flex-h">
+            <span class="flex-item">邀请注册</span>
+            <i class="iconfont iconjiantouright"></i>
+          </router-link>
+          <li class="flex-h">
+            <span class="flex-item">绑定微信</span>
+            <i class="iconfont iconjinggao"></i>
+            <span>未绑定</span>
+            <i class="iconfont iconjiantouright"></i>
+          </li>
+          <li class="flex-h">
+            <span class="flex-item">绑定支付宝</span>
+            <i class="iconfont iconjinggao"></i>
+            <span>未绑定</span>
+            <i class="iconfont iconjiantouright"></i>
+          </li>
+          <router-link tag="li" :to="{ name: 'BangDingShouJi' }" class="flex-h">
+            <span class="flex-item">绑定手机号</span>
+            <i class="iconfont iconjinggao"></i>
+            <span>未绑定</span>
+            <i class="iconfont iconjiantouright"></i>
+          </router-link>
+        </ul>
+      </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
+import MainPageContainer from '../../../../components/common/MainPageContainer'
 import { mapMutations } from 'vuex'
 export default {
   name: '',
@@ -38,6 +43,7 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
     this.EditMainData([ // 配置页面框架数据

src/pages/WoDe/AnQuanZhongXin/SubIndex/page.scss

@@ -1,40 +1,50 @@
 .Page {
   background: #f2f2f2;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  > ul {
-    > li {
-      background: #fff;
-      padding: 0.1rem 0.15rem;
-      position: relative;
-      overflow: hidden;
-      margin-top: 0.1rem;
-      align-items: center;
-      &:first-child {
-        margin-top: 0;
-      }
-      > * {
-        margin-left: 0.05rem;
+  background: #f2f2f2;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > ul {
+      > li {
+        background: #fff;
+        padding: 0.1rem 0.15rem;
+        position: relative;
+        overflow: hidden;
+        margin-top: 0.1rem;
+        align-items: center;
         &:first-child {
-          margin-left: 0;
+          margin-top: 0;
         }
-      }
-      > span {
-        font-size: 0.12rem;
-        line-height: 0.3rem;
-        &:first-child {
-          font-size: 0.16rem;
+        > * {
+          margin-left: 0.05rem;
+          &:first-child {
+            margin-left: 0;
+          }
         }
-      }
-      > i {
-        font-size: 0.16rem;
-        color: #ff8a00;
-        &.active {
-          color: #05b323;
+        > span {
+          font-size: 0.12rem;
+          line-height: 0.3rem;
+          &:first-child {
+            font-size: 0.16rem;
+          }
         }
-        &:last-child {
-          color: #dadada;
-          font-size: 0.2rem;
+        > i {
+          font-size: 0.16rem;
+          color: #ff8a00;
+          &.active {
+            color: #05b323;
+          }
+          &:last-child {
+            color: #dadada;
+            font-size: 0.2rem;
+          }
         }
       }
     }

src/pages/WoDe/AnQuanZhongXin/YaoQingZhuCe/index.vue

@@ -1,18 +1,22 @@
 <template>
   <div class="Page">
-    <div class="centerLabel Card">
-      <div class="Title">
-        <span>您的邀请码为</span>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="邀请注册">
+      <div class="PageContainer">
+        <div class="centerLabel Card">
+          <div class="Title">
+            <span>您的邀请码为</span>
+          </div>
+          <span>123456789</span>
+          <span class="Small">好友也可以在注册时直接填写邀请码</span>
+          <div class="QrCode"></div>
+        </div>
       </div>
-      <span>123456789</span>
-      <span class="Small">好友也可以在注册时直接填写邀请码</span>
-      <div class="QrCode"></div>
-    </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import MainPageContainer from '../../../../components/common/MainPageContainer'
 export default {
   name: '',
   data () {
@@ -22,22 +26,15 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '邀请注册' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ])
   }
 }
 </script>

src/pages/WoDe/AnQuanZhongXin/YaoQingZhuCe/page.scss

@@ -1,46 +1,55 @@
 .Page {
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
+  background: #f2f2f2;
+  width: 100%;
+  height: 100%;
   position: relative;
-  .Card {
-    width: 2.85rem;
-    background: #fff;
-    padding: 0.1rem;
-    border-radius: 0.06rem;
-    box-shadow: 0 0 0.05rem 0.05rem rgba(0, 0, 0, 0.1);
-    > .Title {
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    .Card {
+      width: 2.85rem;
+      background: #fff;
+      padding: 0.1rem;
+      border-radius: 0.06rem;
+      box-shadow: 0 0 0.05rem 0.05rem rgba(0, 0, 0, 0.1);
+      > .Title {
+        > span {
+          display: block;
+          text-align: center;
+          font-size: 0.16rem;
+          font-weight: bold;
+          line-height: 0.3rem;
+        }
+      }
       > span {
         display: block;
         text-align: center;
-        font-size: 0.16rem;
+        font-size: 0.2rem;
         font-weight: bold;
         line-height: 0.3rem;
+        color: #ff5200;
+        &.Small {
+          font-size: 0.14rem;
+          color: #999;
+          line-height: 0.2rem;
+          font-weight: normal;
+          margin-top: 0.1rem;
+          border-bottom: 0.01rem solid #f7f7f7;
+          padding-bottom: 0.2rem;
+        }
       }
-    }
-    > span {
-      display: block;
-      text-align: center;
-      font-size: 0.2rem;
-      font-weight: bold;
-      line-height: 0.3rem;
-      color: #ff5200;
-      &.Small {
-        font-size: 0.14rem;
-        color: #999;
-        line-height: 0.2rem;
-        font-weight: normal;
-        margin-top: 0.1rem;
-        border-bottom: 0.01rem solid #f7f7f7;
-        padding-bottom: 0.2rem;
+      > .QrCode {
+        width: 1rem;
+        height: 1rem;
+        position: relative;
+        overflow: hidden;
+        background: #f7f7f7;
+        margin: 0.5rem auto 0.7rem;
       }
     }
-    > .QrCode {
-      width: 1rem;
-      height: 1rem;
-      position: relative;
-      overflow: hidden;
-      background: #f7f7f7;
-      margin: 0.5rem auto 0.7rem;
-    }
   }
 }

src/pages/WoDe/CaiPiaoXiangQing/index.vue

@@ -1,71 +1,39 @@
 <template>
   <div class="Page CaiPiaoXiangQing">
-
-    <div class="Top" v-if="Detail !== null">
-      <div class="Type flex-h">
-        <img src="../../../assets/img/icon2.png" v-if="Detail.betting.lotteryId === 'p5'" alt="">
-        <img src="../../../assets/img/icon3.png" v-if="Detail.betting.lotteryId === 'football'" alt="">
-        <img src="../../../assets/img/icon4.png" v-if="Detail.betting.lotteryId === 'lottery'" alt="">
-        <img src="../../../assets/img/icon5.png" v-if="Detail.betting.lotteryId === 'double-color'" alt="">
-        <img src="../../../assets/img/icon6.png" v-if="Detail.betting.lotteryId === 'basketball'" alt="">
-        <img src="../../../assets/img/icon7.png" v-if="Detail.betting.lotteryId === 'p3'" alt="">
-        <span>{{ToolClass.GetLotteryName(Detail.betting.lotteryId)}}</span>
-        <div class="flex-item"></div>
-        <span>第{{Detail.betting.issueNo}}期</span>
-      </div>
-      <div class="Status flex-h">
-        <div class="flex-item">
-          <span>-</span>
-          <span>中奖金额（元）</span>
-        </div>
-        <div class="flex-item">
-          <span>未中奖</span>
-          <span>订单状态</span>
-        </div>
-        <div class="flex-item">
-          <span><em>2</em></span>
-          <span>投注金额（元）</span>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="彩票详情">
+      <div class="PageContainer">
+        <div class="Top" v-if="Detail !== null">
+          <div class="Type flex-h">
+            <img src="../../../assets/img/icon2.png" v-if="Detail.betting.lotteryId === 'p5'" alt="">
+            <img src="../../../assets/img/icon3.png" v-if="Detail.betting.lotteryId === 'football'" alt="">
+            <img src="../../../assets/img/icon4.png" v-if="Detail.betting.lotteryId === 'lottery'" alt="">
+            <img src="../../../assets/img/icon5.png" v-if="Detail.betting.lotteryId === 'double-color'" alt="">
+            <img src="../../../assets/img/icon6.png" v-if="Detail.betting.lotteryId === 'basketball'" alt="">
+            <img src="../../../assets/img/icon7.png" v-if="Detail.betting.lotteryId === 'p3'" alt="">
+            <span>{{ToolClass.GetLotteryName(Detail.betting.lotteryId)}}</span>
+            <div class="flex-item"></div>
+            <span>第{{Detail.betting.issueNo}}期</span>
+          </div>
+          <div class="Status flex-h">
+            <div class="flex-item">
+              <span>-</span>
+              <span>中奖金额（元）</span>
+            </div>
+            <div class="flex-item">
+              <span>未中奖</span>
+              <span>订单状态</span>
+            </div>
+            <div class="flex-item">
+              <span><em>2</em></span>
+              <span>投注金额（元）</span>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-
-    <div class="Res">
-      <div class="Title flex-h">
-        <span class="flex-item">开奖结果</span>
-      </div>
-      <ul>
-        <li>1</li>
-        <li>2</li>
-        <li>3</li>
-        <li>4</li>
-        <li>5</li>
-        <li>6</li>
-        <li>7</li>
-      </ul>
-    </div>
 
-    <div class="BettingInfo">
-      <div class="Title flex-h">
-        <span class="flex-item">投注信息</span>
-        <span>1注1倍</span>
-      </div>
-      <div class="List flex-h">
-        <span>单式追加</span>
-        <div class="flex-item">
-          <ul>
-            <li>1</li>
-            <li>2</li>
-            <li>3</li>
-            <li>4</li>
-            <li>5</li>
-            <li>6</li>
-            <li>7</li>
-          </ul>
-        </div>
-      </div>
-      <div class="List flex-h">
-        <span>单式追加</span>
-        <div class="flex-item">
+        <div class="Res">
+          <div class="Title flex-h">
+            <span class="flex-item">开奖结果</span>
+          </div>
           <ul>
             <li>1</li>
             <li>2</li>
@@ -76,51 +44,86 @@
             <li>7</li>
           </ul>
         </div>
-      </div>
-    </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>xxx</span>
-            </div>
+        <div class="BettingInfo">
+          <div class="Title flex-h">
+            <span class="flex-item">投注信息</span>
+            <span>1注1倍</span>
           </div>
-        </li>
-        <li class="flex-h">
-          <span>下单时间：</span>
-          <div class="flex-item">
-            <div>
-              <span>{{ToolClass.FormatDate(Detail.betting.createDate)}}</span>
+          <div class="List flex-h">
+            <span>单式追加</span>
+            <div class="flex-item">
+              <ul>
+                <li>1</li>
+                <li>2</li>
+                <li>3</li>
+                <li>4</li>
+                <li>5</li>
+                <li>6</li>
+                <li>7</li>
+              </ul>
             </div>
           </div>
-        </li>
-        <li class="flex-h">
-          <span>出票时间：</span>
-          <div class="flex-item">
-            <div>
-              <span>xxx</span>
+          <div class="List flex-h">
+            <span>单式追加</span>
+            <div class="flex-item">
+              <ul>
+                <li>1</li>
+                <li>2</li>
+                <li>3</li>
+                <li>4</li>
+                <li>5</li>
+                <li>6</li>
+                <li>7</li>
+              </ul>
             </div>
           </div>
-        </li>
-      </ul>
-      <img src="" width="100%" alt="">
-    </div>
+        </div>
 
-    <div class="Btn">
-      <a>联系店主</a>
-    </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>xxx</span>
+                </div>
+              </div>
+            </li>
+            <li class="flex-h">
+              <span>下单时间：</span>
+              <div class="flex-item">
+                <div>
+                  <span>{{ToolClass.FormatDate(Detail.betting.createDate)}}</span>
+                </div>
+              </div>
+            </li>
+            <li class="flex-h">
+              <span>出票时间：</span>
+              <div class="flex-item">
+                <div>
+                  <span>xxx</span>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <img src="" width="100%" alt="">
+        </div>
 
+        <div class="Btn">
+          <a>联系店主</a>
+        </div>
+      </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -134,13 +137,9 @@ export default {
     })
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '彩票详情' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -148,9 +147,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserActions([
       'GetBettingDetail'
     ]),

src/pages/WoDe/CaiPiaoXiangQing/page.scss

@@ -1,205 +1,213 @@
 .Page.CaiPiaoXiangQing {
   background: #f2f2f2;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
+  width: 100%;
+  height: 100%;
   position: relative;
-  > div {
-    background: #fff;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
     position: relative;
-    overflow: hidden;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-    margin-top: 0.15rem;
-    &:first-child {
-      margin-top: 0;
-    }
-    > .Title {
-      padding: 0 0.15rem;
-      align-items: center;
-      > span {
-        font-size: 0.12rem;
-        color: #666;
-        line-height: 0.2rem;
-        &:first-child {
-          font-size: 0.14rem;
-          color: #333;
-          font-weight: bold;
-          margin-right: 0.1rem;
-          line-height: 0.4rem;
-        }
-      }
-    }
-  }
-  > .Top {
-    > div.Type {
-      padding: 0.05rem 0.15rem;
-      align-items: center;
-      border-bottom: 0.01rem solid #f7f7f7;
-      > img {
-        width: 0.2rem;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > div {
+      background: #fff;
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+      margin-top: 0.15rem;
+      &:first-child {
+        margin-top: 0;
       }
-      > span {
-        font-size: 0.12rem;
-        color: #333;
-        font-weight: bold;
-        margin-left: 0.1rem;
-        &:last-child {
-          font-weight: normal;
-          color: #999;
+      > .Title {
+        padding: 0 0.15rem;
+        align-items: center;
+        > span {
+          font-size: 0.12rem;
+          color: #666;
+          line-height: 0.2rem;
+          &:first-child {
+            font-size: 0.14rem;
+            color: #333;
+            font-weight: bold;
+            margin-right: 0.1rem;
+            line-height: 0.4rem;
+          }
         }
       }
     }
-    > .Status {
-      align-items: center;
-      padding: 0.1rem 0;
-      > div {
-        position: relative;
-        overflow: hidden;
-        &::after {
-          content: "";
-          display: block;
-          position: absolute;
-          left: 0;
-          height: 60%;
-          top: 20%;
-          width: 0.01rem;
-          background: #f7f7f7;
-        }
-        &:first-child {
-          &::after {
-            display: none;
-          }
+    > .Top {
+      > div.Type {
+        padding: 0.05rem 0.15rem;
+        align-items: center;
+        border-bottom: 0.01rem solid #f7f7f7;
+        > img {
+          width: 0.2rem;
         }
         > span {
-          display: block;
-          text-align: center;
           font-size: 0.12rem;
-          line-height: 0.2rem;
+          color: #333;
+          font-weight: bold;
+          margin-left: 0.1rem;
           &:last-child {
-            font-weight: bold;
+            font-weight: normal;
+            color: #999;
           }
-          > em {
-            color: #d91d36;
+        }
+      }
+      > .Status {
+        align-items: center;
+        padding: 0.1rem 0;
+        > div {
+          position: relative;
+          overflow: hidden;
+          &::after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 0;
+            height: 60%;
+            top: 20%;
+            width: 0.01rem;
+            background: #f7f7f7;
+          }
+          &:first-child {
+            &::after {
+              display: none;
+            }
+          }
+          > span {
+            display: block;
+            text-align: center;
             font-size: 0.12rem;
             line-height: 0.2rem;
-            font-weight: bold;
+            &:last-child {
+              font-weight: bold;
+            }
+            > em {
+              color: #d91d36;
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              font-weight: bold;
+            }
           }
         }
       }
     }
-  }
-  > .Res {
-    > span {
-      display: block;
-      font-size: 0.14rem;
-      color: #333;
-      font-weight: bold;
-      line-height: 0.2rem;
-    }
-    > ul {
-      position: relative;
-      overflow: hidden;
-      font-size: 0;
-      padding: 0.1rem 0.15rem;
-      border-top: 0.01rem solid #f7f7f7;
-      > li {
-        display: inline-block;
-        vertical-align: middle;
-        font-size: 0.12rem;
-        color: #fff;
-        width: 0.24rem;
-        height: 0.24rem;
-        line-height: 0.24rem;
-        text-align: center;
-        background: #ff5100;
-        border-radius: 100%;
-        margin-right: 0.05rem;
-      }
-    }
-  }
-  > .BettingInfo {
-    > .List {
-      align-items: flex-start;
-      padding: 0 0.15rem;
-      padding-top: 0.1rem;
-      border-top: 0.01rem solid #f7f7f7;
+    > .Res {
       > span {
-        font-size: 0.12rem;
-        color: #666;
-        line-height: 0.24rem;
-        margin-right: 0.1rem;
+        display: block;
+        font-size: 0.14rem;
+        color: #333;
+        font-weight: bold;
+        line-height: 0.2rem;
       }
-      > div {
+      > ul {
         position: relative;
         overflow: hidden;
-        padding-bottom: 0.05rem;
-        > ul {
-          width: 100%;
-          font-size: 0;
-          > li {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.12rem;
-            color: #fff;
-            width: 0.24rem;
-            height: 0.24rem;
-            line-height: 0.24rem;
-            text-align: center;
-            background: #ff5100;
-            border-radius: 100%;
-            margin-right: 0.05rem;
-            margin-bottom: 0.05rem;
-          }
+        font-size: 0;
+        padding: 0.1rem 0.15rem;
+        border-top: 0.01rem solid #f7f7f7;
+        > li {
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 0.12rem;
+          color: #fff;
+          width: 0.24rem;
+          height: 0.24rem;
+          line-height: 0.24rem;
+          text-align: center;
+          background: #ff5100;
+          border-radius: 100%;
+          margin-right: 0.05rem;
         }
       }
     }
-  }
-  > .OrderInfo {
-    > ul {
-      border-top: 0.01rem solid #f7f7f7;
-      padding: 0 0.15rem;
-      padding-top: 0.1rem;
-      > li {
-        align-items: center;
+    > .BettingInfo {
+      > .List {
+        align-items: flex-start;
+        padding: 0 0.15rem;
+        padding-top: 0.1rem;
+        border-top: 0.01rem solid #f7f7f7;
         > span {
           font-size: 0.12rem;
-          color: #333;
-          line-height: 0.2rem;
-          margin-right: 0.05rem;
-          > div {
-            position: relative;
+          color: #666;
+          line-height: 0.24rem;
+          margin-right: 0.1rem;
+        }
+        > div {
+          position: relative;
+          overflow: hidden;
+          padding-bottom: 0.05rem;
+          > ul {
+            width: 100%;
+            font-size: 0;
+            > li {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.12rem;
+              color: #fff;
+              width: 0.24rem;
+              height: 0.24rem;
+              line-height: 0.24rem;
+              text-align: center;
+              background: #ff5100;
+              border-radius: 100%;
+              margin-right: 0.05rem;
+              margin-bottom: 0.05rem;
+            }
+          }
+        }
+      }
+    }
+    > .OrderInfo {
+      > ul {
+        border-top: 0.01rem solid #f7f7f7;
+        padding: 0 0.15rem;
+        padding-top: 0.1rem;
+        > li {
+          align-items: center;
+          > span {
+            font-size: 0.12rem;
+            color: #333;
+            line-height: 0.2rem;
+            margin-right: 0.05rem;
             > div {
-              width: 100%;
               position: relative;
-              overflow: hidden;
-              > span {
-                display: block;
-                font-size: 0.12rem;
-                color: #333;
-                line-height: 0.2rem;
+              > div {
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                > span {
+                  display: block;
+                  font-size: 0.12rem;
+                  color: #333;
+                  line-height: 0.2rem;
+                }
               }
             }
           }
         }
       }
+      > img {
+        margin-top: 0.1rem;
+        margin-bottom: 0.1rem;
+      }
     }
-    > img {
-      margin-top: 0.1rem;
-      margin-bottom: 0.1rem;
-    }
-  }
-  > .Btn {
-    background: none;
-    box-shadow: none;
-    padding: 0 0.15rem;
-    margin-bottom: 0.4rem;
-    > a {
-      display: block;
-      font-size: 0.16rem;
-      color: #fff;
-      background: #ff5100;
-      line-height: 0.4rem;
-      text-align: center;
-      border-radius: 0.06rem;
+    > .Btn {
+      background: none;
+      box-shadow: none;
+      padding: 0 0.15rem;
+      margin-bottom: 0.4rem;
+      > a {
+        display: block;
+        font-size: 0.16rem;
+        color: #fff;
+        background: #ff5100;
+        line-height: 0.4rem;
+        text-align: center;
+        border-radius: 0.06rem;
+      }
     }
   }
 }

src/pages/WoDe/GeRenSheZhi/GuanYuWoMen/index.vue

@@ -1,21 +1,25 @@
 <template>
   <div class="Page">
-    <div class="Content">
-      <span>牛彩成功的关键是赢得良好的口碑，诚信服务、热心解答、精心提供资料、延伸服务。</span>
-      <span>业主的综合素质水平直接决定了投注站的服务质量。牛彩致力于与业主一起共同成长，并提供专业服务，不断提高业务水平，始终秉承诚信经营，创新服务新内涵，为广大站点彩民提供更优质、贴心、便捷的个性化服务。</span>
-      <div class="Box"></div>
-    </div>
-    <div class="Logo">
-      <div class="Img">
-        <img src="../../../../assets/img/logo.png" class="centerLabel contain" alt="">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="关于我们">
+      <div class="PageContainer">
+        <div class="Content">
+          <span>牛彩成功的关键是赢得良好的口碑，诚信服务、热心解答、精心提供资料、延伸服务。</span>
+          <span>业主的综合素质水平直接决定了投注站的服务质量。牛彩致力于与业主一起共同成长，并提供专业服务，不断提高业务水平，始终秉承诚信经营，创新服务新内涵，为广大站点彩民提供更优质、贴心、便捷的个性化服务。</span>
+          <div class="Box"></div>
+        </div>
+        <div class="Logo">
+          <div class="Img">
+            <img src="../../../../assets/img/logo.png" class="centerLabel contain" alt="">
+          </div>
+          <span>牛彩</span>
+        </div>
       </div>
-      <span>牛彩</span>
-    </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import MainPageContainer from '../../../../components/common/MainPageContainer'
 export default {
   name: '',
   data () {
@@ -25,22 +29,15 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '关于我们' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ])
   }
 }
 </script>

src/pages/WoDe/GeRenSheZhi/GuanYuWoMen/page.scss

@@ -1,42 +1,51 @@
 .Page {
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  > .Content {
-    min-height: 100%;
-    padding: 0 0.15rem;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
     position: relative;
-    overflow: hidden;
-    > span {
-      display: block;
-      font-size: 0.14rem;
-      color: #adadad;
-      line-height: 0.2rem;
-      text-align: justify;
-      text-indent: 2em;
-      &:first-child {
-        margin-top: 0.2rem;
-      }
-    }
-    > .Box {
-      width: 100%;
-      height: 1rem;
-    }
-  }
-  > .Logo {
-    text-align: center;
-    margin-top: -1rem;
-    > .Img {
-      width: 0.44rem;
-      height: 0.44rem;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > .Content {
+      min-height: 100%;
+      padding: 0 0.15rem;
       position: relative;
       overflow: hidden;
-      margin: 0 auto;
+      > span {
+        display: block;
+        font-size: 0.14rem;
+        color: #adadad;
+        line-height: 0.2rem;
+        text-align: justify;
+        text-indent: 2em;
+        &:first-child {
+          margin-top: 0.2rem;
+        }
+      }
+      > .Box {
+        width: 100%;
+        height: 1rem;
+      }
     }
-    > span {
-      font-size: 0.17rem;
-      display: inline-block;
-      margin-top: 0.1rem;
-      line-height: 0.3rem;
+    > .Logo {
+      text-align: center;
+      margin-top: -1rem;
+      > .Img {
+        width: 0.44rem;
+        height: 0.44rem;
+        position: relative;
+        overflow: hidden;
+        margin: 0 auto;
+      }
+      > span {
+        font-size: 0.17rem;
+        display: inline-block;
+        margin-top: 0.1rem;
+        line-height: 0.3rem;
+      }
     }
   }
 }

src/pages/WoDe/GeRenSheZhi/SheZhi/index.vue

@@ -1,21 +1,26 @@
 <template>
   <div class="Page">
-    <ul>
-      <router-link tag="li" class="flex-h" :to="{name: 'ZhangHuSheZhi'}">
-        <span class="flex-item">账户设置</span>
-        <i class="iconfont iconjiantouright"></i>
-      </router-link>
-      <router-link tag="li" class="flex-h" :to="{name: 'GuanYuWoMen'}">
-        <span class="flex-item">关于我们</span>
-        <i class="iconfont iconjiantouright"></i>
-      </router-link>
-    </ul>
-    <a @click="SignOut">退出登录</a>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="个人设置">
+      <div class="PageContainer">
+        <ul>
+          <router-link tag="li" class="flex-h" :to="{name: 'ZhangHuSheZhi'}">
+            <span class="flex-item">账户设置</span>
+            <i class="iconfont iconjiantouright"></i>
+          </router-link>
+          <router-link tag="li" class="flex-h" :to="{name: 'GuanYuWoMen'}">
+            <span class="flex-item">关于我们</span>
+            <i class="iconfont iconjiantouright"></i>
+          </router-link>
+        </ul>
+        <a @click="SignOut">退出登录</a>
+      </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -26,22 +31,15 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '个人设置' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserMutations([
       'EmptyUserInfo'
     ]),

src/pages/WoDe/GeRenSheZhi/SheZhi/page.scss

@@ -1,29 +1,40 @@
 .Page {
   background: #f2f2f2;
-  > ul {
-    padding: 0 0.15rem;
-    background: #fff;
-    > li {
-      align-items: center;
-      padding: 0.14rem 0;
-      border-bottom: 0.01rem solid #f7f7f7;
-      > span {
-        font-size: 0.16rem;
-        line-height: 0.2rem;
-      }
-      > i {
-        font-size: 0.2rem;
-        color: #dadada;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > ul {
+      padding: 0 0.15rem;
+      background: #fff;
+      > li {
+        align-items: center;
+        padding: 0.14rem 0;
+        border-bottom: 0.01rem solid #f7f7f7;
+        > span {
+          font-size: 0.16rem;
+          line-height: 0.2rem;
+        }
+        > i {
+          font-size: 0.2rem;
+          color: #dadada;
+        }
       }
     }
-  }
-  > a {
-    display: block;
-    background: #fff;
-    text-align: center;
-    margin-top: 0.1rem;
-    font-size: 0.17rem;
-    color: #ff5200;
-    line-height: 0.5rem;
+    > a {
+      display: block;
+      background: #fff;
+      text-align: center;
+      margin-top: 0.1rem;
+      font-size: 0.17rem;
+      color: #ff5200;
+      line-height: 0.5rem;
+    }
   }
 }

src/pages/WoDe/GeRenSheZhi/ZhangHuSheZhi/EditUserNick/index.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="Page">
-    <div class="Form">
-      <input type="text" placeholder="请输入2~12个字符">
-    </div>
-    <span>填写成功后不可更改</span>
-    <div class="Btn">
-      <a>确认</a>
-    </div>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="设置昵称">
+      <div class="PageContainer">
+        <div class="Form">
+          <input type="text" placeholder="请输入2~12个字符">
+        </div>
+        <span>填写成功后不可更改</span>
+        <div class="Btn">
+          <a>确认</a>
+        </div>
+      </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import MainPageContainer from '../../../../../components/common/MainPageContainer'
 export default {
   name: '',
   data () {
@@ -21,22 +25,15 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '设置昵称' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ])
   }
 }
 </script>

src/pages/WoDe/GeRenSheZhi/ZhangHuSheZhi/EditUserNick/page.scss

@@ -1,34 +1,45 @@
 .Page {
   background: #f2f2f2;
-  > .Form {
-    padding: 0.15rem;
-    background: #fff;
-    > input {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > .Form {
+      padding: 0.15rem;
+      background: #fff;
+      > input {
+        display: block;
+        font-size: 0.14rem;
+        line-height: 0.2rem;
+        width: 100%;
+      }
+    }
+    > span {
       display: block;
-      font-size: 0.14rem;
+      font-size: 0.12rem;
+      color: #adadad;
       line-height: 0.2rem;
-      width: 100%;
+      margin-top: 0.05rem;
+      text-indent: 0.15rem;
     }
-  }
-  > span {
-    display: block;
-    font-size: 0.12rem;
-    color: #adadad;
-    line-height: 0.2rem;
-    margin-top: 0.05rem;
-    text-indent: 0.15rem;
-  }
-  > .Btn {
-    padding: 0 0.15rem;
-    margin-top: 0.5rem;
-    > a {
-      display: block;
-      text-align: center;
-      font-size: 0.16rem;
-      color: #fff;
-      background: #ff5200;
-      border-radius: 0.06rem;
-      line-height: 0.42rem;
+    > .Btn {
+      padding: 0 0.15rem;
+      margin-top: 0.5rem;
+      > a {
+        display: block;
+        text-align: center;
+        font-size: 0.16rem;
+        color: #fff;
+        background: #ff5200;
+        border-radius: 0.06rem;
+        line-height: 0.42rem;
+      }
     }
   }
 }

src/pages/WoDe/GeRenSheZhi/ZhangHuSheZhi/UserInfo/index.vue

@@ -1,24 +1,28 @@
 <template>
   <div class="Page">
-    <ul>
-      <li class="flex-h">
-        <span class="flex-item">头像</span>
-        <div class="Icon">
-          <img src="" class="centerLabel cover" alt="">
-        </div>
-        <i class="iconfont iconjiantouright"></i>
-      </li>
-      <router-link tag="li" class="flex-h" :to="{name: 'EditUserNick'}">
-        <span class="flex-item">昵称</span>
-        <span>未设置</span>
-        <i class="iconfont iconjiantouright"></i>
-      </router-link>
-    </ul>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="账户设置">
+      <div class="PageContainer">
+        <ul>
+          <li class="flex-h">
+            <span class="flex-item">头像</span>
+            <div class="Icon">
+              <img src="" class="centerLabel cover" alt="">
+            </div>
+            <i class="iconfont iconjiantouright"></i>
+          </li>
+          <router-link tag="li" class="flex-h" :to="{name: 'EditUserNick'}">
+            <span class="flex-item">昵称</span>
+            <span>未设置</span>
+            <i class="iconfont iconjiantouright"></i>
+          </router-link>
+        </ul>
+      </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import MainPageContainer from '../../../../../components/common/MainPageContainer'
 export default {
   name: '',
   data () {
@@ -28,22 +32,15 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '账户设置' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ])
   }
 }
 </script>

src/pages/WoDe/GeRenSheZhi/ZhangHuSheZhi/UserInfo/page.scss

@@ -1,32 +1,43 @@
 .Page {
   background: #f2f2f2;
-  > ul {
-    padding: 0 0.15rem;
-    background: #fff;
-    > li {
-      align-items: center;
-      padding: 0.14rem 0;
-      border-bottom: 0.01rem solid #f7f7f7;
-      > span {
-        font-size: 0.16rem;
-        line-height: 0.2rem;
-        & + span {
-          font-size: 0.14rem;
-          color: #999;
-          font-weight: normal;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > ul {
+      padding: 0 0.15rem;
+      background: #fff;
+      > li {
+        align-items: center;
+        padding: 0.14rem 0;
+        border-bottom: 0.01rem solid #f7f7f7;
+        > span {
+          font-size: 0.16rem;
+          line-height: 0.2rem;
+          & + span {
+            font-size: 0.14rem;
+            color: #999;
+            font-weight: normal;
+          }
+        }
+        > i {
+          font-size: 0.2rem;
+          color: #dadada;
+        }
+        > .Icon {
+          width: 0.24rem;
+          height: 0.24rem;
+          border-radius: 100%;
+          position: relative;
+          overflow: hidden;
+          background: #dbdbdb;
         }
-      }
-      > i {
-        font-size: 0.2rem;
-        color: #dadada;
-      }
-      > .Icon {
-        width: 0.24rem;
-        height: 0.24rem;
-        border-radius: 100%;
-        position: relative;
-        overflow: hidden;
-        background: #dbdbdb;
       }
     }
   }

src/pages/WoDe/WoDeCaiPiao/index.vue

@@ -1,42 +1,47 @@
 <template>
   <div class="Page">
-    <scroller :on-refresh="Refresh" ref="MyScroller">
-      <div class="Container">
-        <ul>
-          <router-link tag="li" :to="{ name: 'CaiPiaoXiangQing', query: { id: item.bettingId } }" v-for="(item, index) in UserBettingList" :key="index">
-            <div class="Time">
-              <span>下单时间：{{ToolClass.FormatDate(item.createDate)}}</span>
-              <span>{{item.issueNo}}期</span>
-            </div>
-            <div class="flex-h">
-              <div class="Icon">
-                <img v-if="item.lotteryId === 'zq'" src="../../../assets/img/icon3.png" class="centerLabel cover" alt="">
-                <img v-if="item.lotteryId === 'lq'" src="../../../assets/img/icon6.png" class="centerLabel cover" alt="">
-                <img v-if="item.lotteryId === 'lottery'" src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
-                <img v-if="item.lotteryId === 'double-color'" src="../../../assets/img/icon5.png" class="centerLabel cover" alt="">
-                <img v-if="item.lotteryId === 'p3'" src="../../../assets/img/icon7.png" class="centerLabel cover" alt="">
-                <img v-if="item.lotteryId === 'p5'" src="../../../assets/img/icon2.png" class="centerLabel cover" alt="">
-              </div>
-              <div class="flex-item">
-                <span>{{item.lotteryName}}</span>
-                <span>{{item.totalPrice}}元</span>
-              </div>
-            </div>
-            <div class="flex-h">
-              <div class="flex-item">
-                <span>订单号：{{null}}</span>
-              </div>
-              <span>{{item.status}}</span>
-            </div>
-          </router-link>
-        </ul>
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="我的彩票">
+      <div class="PageContainer">
+        <scroller :on-refresh="Refresh" ref="MyScroller">
+          <div class="Container">
+            <ul>
+              <router-link tag="li" :to="{ name: 'CaiPiaoXiangQing', query: { id: item.bettingId } }" v-for="(item, index) in UserBettingList" :key="index">
+                <div class="Time">
+                  <span>下单时间：{{ToolClass.FormatDate(item.createDate)}}</span>
+                  <span>{{item.issueNo}}期</span>
+                </div>
+                <div class="flex-h">
+                  <div class="Icon">
+                    <img v-if="item.lotteryId === 'zq'" src="../../../assets/img/icon3.png" class="centerLabel cover" alt="">
+                    <img v-if="item.lotteryId === 'lq'" src="../../../assets/img/icon6.png" class="centerLabel cover" alt="">
+                    <img v-if="item.lotteryId === 'lottery'" src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
+                    <img v-if="item.lotteryId === 'double-color'" src="../../../assets/img/icon5.png" class="centerLabel cover" alt="">
+                    <img v-if="item.lotteryId === 'p3'" src="../../../assets/img/icon7.png" class="centerLabel cover" alt="">
+                    <img v-if="item.lotteryId === 'p5'" src="../../../assets/img/icon2.png" class="centerLabel cover" alt="">
+                  </div>
+                  <div class="flex-item">
+                    <span>{{item.lotteryName}}</span>
+                    <span>{{item.totalPrice}}元</span>
+                  </div>
+                </div>
+                <div class="flex-h">
+                  <div class="flex-item">
+                    <span>订单号：{{null}}</span>
+                  </div>
+                  <span>{{item.status}}</span>
+                </div>
+              </router-link>
+            </ul>
+          </div>
+        </scroller>
       </div>
-    </scroller>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -56,13 +61,9 @@ export default {
     })
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '我的彩票' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -70,9 +71,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserActions([
       'GetUserBettingList'
     ]),

src/pages/WoDe/WoDeCaiPiao/page.scss

@@ -1,50 +1,21 @@
 .Page {
-  .Container {
-    > ul {
-      padding: 0 0.15rem;
-      > li {
-        padding: 0.1rem 0;
-        border-bottom: 0.01rem solid #f7f7f7;
-        position: relative;
-        overflow: hidden;
-        > .Time {
-          font-size: 0;
-          white-space: nowrap;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            color: #999;
-            line-height: 0.2rem;
-            margin-left: 0.5rem;
-            &:first-child {
-              margin-left: 0;
-            }
-          }
-        }
-        > .flex-h {
-          margin-top: 0.05rem;
-          align-items: center;
-          > .Icon {
-            width: 0.22rem;
-            height: 0.22rem;
-            position: relative;
-            overflow: hidden;
-            margin-right: 0.1rem;
-            & + div.flex-item {
-              > span {
-                font-size: 0.14rem;
-                margin-left: 0.2rem;
-                color: #333;
-                &:first-child {
-                  font-size: 0.15rem;
-                  font-weight: bold;
-                  margin-left: 0;
-                }
-              }
-            }
-          }
-          > .flex-item {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .Container {
+      > ul {
+        padding: 0 0.15rem;
+        > li {
+          padding: 0.1rem 0;
+          border-bottom: 0.01rem solid #f7f7f7;
+          position: relative;
+          overflow: hidden;
+          > .Time {
             font-size: 0;
             white-space: nowrap;
             > span {
@@ -52,15 +23,53 @@
               vertical-align: middle;
               font-size: 0.1rem;
               color: #999;
-              line-height: 0.22rem;
+              line-height: 0.2rem;
+              margin-left: 0.5rem;
               &:first-child {
-                margin-left: 0.32rem;
+                margin-left: 0;
               }
             }
           }
-          > span {
-            font-size: 0.1rem;
-            color: #333;
+          > .flex-h {
+            margin-top: 0.05rem;
+            align-items: center;
+            > .Icon {
+              width: 0.22rem;
+              height: 0.22rem;
+              position: relative;
+              overflow: hidden;
+              margin-right: 0.1rem;
+              & + div.flex-item {
+                > span {
+                  font-size: 0.14rem;
+                  margin-left: 0.2rem;
+                  color: #333;
+                  &:first-child {
+                    font-size: 0.15rem;
+                    font-weight: bold;
+                    margin-left: 0;
+                  }
+                }
+              }
+            }
+            > .flex-item {
+              font-size: 0;
+              white-space: nowrap;
+              > span {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.1rem;
+                color: #999;
+                line-height: 0.22rem;
+                &:first-child {
+                  margin-left: 0.32rem;
+                }
+              }
+            }
+            > span {
+              font-size: 0.1rem;
+              color: #333;
+            }
           }
         }
       }

src/pages/WoDe/XiaZaiErWeiMa/index.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="Page">
-    下载二维码
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="下载二维码">
+      <div class="PageContainer">
+        下载二维码
+      </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
 export default {
   name: '',
   data () {
@@ -15,22 +19,15 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '下载二维码' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ])
   }
 }
 </script>

src/pages/WoDe/XiaZaiErWeiMa/page.scss

@@ -1,2 +1,11 @@
 .Page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
 }

src/pages/WoDe/ZhangHaoMingXi/index.vue

@@ -1,46 +1,49 @@
 <template>
-  <div class="Page flex-v">
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="账号明细">
+      <div class="PageContainer flex-v">
+        <!-- 导航 -->
+        <nav class="flex-h">
+          <a class="flex-item" v-for="(item, index) in NavList" :key="index" :class="{'active': NavActiveId === item.id}" @click="CutNav(item, index)">{{item.name}}</a>
+        </nav>
 
-    <!-- 导航 -->
-    <nav class="flex-h">
-      <a class="flex-item" v-for="(item, index) in NavList" :key="index" :class="{'active': NavActiveId === item.id}" @click="CutNav(item, index)">{{item.name}}</a>
-    </nav>
+        <!-- 内容 -->
+        <div class="flex-item">
+          <div>
+            <swiper :options="SwiperOptions" ref="MySwiper">
+              <swiper-slide v-for="(item, index) in NavList" :key="index">
+                <div class="SwiperItem">
+                  <scroller :on-refresh="Refresh">
+                    <div class="Container">
 
-    <!-- 内容 -->
-    <div class="flex-item">
-      <div>
-        <swiper :options="SwiperOptions" ref="MySwiper">
-          <swiper-slide v-for="(item, index) in NavList" :key="index">
-            <div class="SwiperItem">
-              <scroller :on-refresh="Refresh">
-                <div class="Container">
-
-                  <!-- 全部 -->
-                  <ul>
-                    <li v-for="(item, index) in UserAccountDetails[ReturnType(item.id)]" :key="index" class="flex-h">
-                      <div class="flex-item">
-                        <span>{{item.type}}</span>
-                        <span>{{item.createDate}}</span>
-                      </div>
-                      <span>{{item.amount}}元</span>
-                    </li>
-                  </ul>
+                      <!-- 全部 -->
+                      <ul>
+                        <li v-for="(item, index) in UserAccountDetails[ReturnType(item.id)]" :key="index" class="flex-h">
+                          <div class="flex-item">
+                            <span>{{item.type}}</span>
+                            <span>{{item.createDate}}</span>
+                          </div>
+                          <span>{{item.amount}}元</span>
+                        </li>
+                      </ul>
 
+                    </div>
+                  </scroller>
                 </div>
-              </scroller>
-            </div>
-          </swiper-slide>
-        </swiper>
+              </swiper-slide>
+            </swiper>
+          </div>
+        </div>
       </div>
-    </div>
-
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
 import 'swiper/dist/css/swiper.css'
+import MainPageContainer from '../../../components/common/MainPageContainer'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -75,23 +78,16 @@ export default {
   },
   components: {
     swiper,
-    swiperSlide
+    swiperSlide,
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '账号明细' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     CutNav (item, index) { // 切换nav
       if (this.DataLock) return
       this.DataLock = true

src/pages/WoDe/ZhangHaoMingXi/page.scss

@@ -1,82 +1,91 @@
 .Page {
-  > nav {
-    align-items: center;
-    border-bottom: 0.01rem solid #f7f7f7;
-    > a {
-      font-size: 0.14rem;
-      line-height: 0.4rem;
-      position: relative;
-      overflow: hidden;
-      text-align: center;
-      color: #666;
-      &.active {
-        color: #ff5200;
-        &::after {
-          content: "";
-          width: 0.26rem;
-          height: 0.02rem;
-          background: #ff5200;
-          display: block;
-          position: absolute;
-          left: 50%;
-          transform: translateX(-50%);
-          -webkit-transform: translateX(-50%);
-          bottom: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    > nav {
+      align-items: center;
+      border-bottom: 0.01rem solid #f7f7f7;
+      > a {
+        font-size: 0.14rem;
+        line-height: 0.4rem;
+        position: relative;
+        overflow: hidden;
+        text-align: center;
+        color: #666;
+        &.active {
+          color: #ff5200;
+          &::after {
+            content: "";
+            width: 0.26rem;
+            height: 0.02rem;
+            background: #ff5200;
+            display: block;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            -webkit-transform: translateX(-50%);
+            bottom: 0;
+          }
         }
       }
     }
-  }
-  > .flex-item {
-    position: relative;
-    overflow: hidden;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
+    > .flex-item {
+      position: relative;
       overflow: hidden;
       > div {
         width: 100%;
-        height: 100%;
-        position: relative;
-        .SwiperItem {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        > div {
           width: 100%;
           height: 100%;
           position: relative;
-          .Container {
-            ul {
-              padding: 0 0.15rem;
-              > li {
-                align-items: center;
-                padding: 0.1rem 0;
-                border-bottom: 0.01rem solid #f7f7f7;
-                > div {
+          .SwiperItem {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            .Container {
+              ul {
+                padding: 0 0.15rem;
+                > li {
+                  align-items: center;
+                  padding: 0.1rem 0;
+                  border-bottom: 0.01rem solid #f7f7f7;
+                  > div {
+                    > span {
+                      display: block;
+                      width: 100%;
+                      font-size: 0.12rem;
+                      color: #999;
+                      line-height: 0.2rem;
+                      white-space: nowrap;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      &:first-child {
+                        font-size: 0.15rem;
+                        color: #333;
+                        margin-bottom: 0.05rem;
+                      }
+                    }
+                  }
                   > span {
-                    display: block;
-                    width: 100%;
-                    font-size: 0.12rem;
+                    font-size: 0.15rem;
+                    font-weight: bold;
                     color: #999;
-                    line-height: 0.2rem;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    &:first-child {
-                      font-size: 0.15rem;
-                      color: #333;
-                      margin-bottom: 0.05rem;
+                    margin-left: 0.1rem;
+                    &.active {
+                      color: #ff5200;
                     }
                   }
                 }
-                > span {
-                  font-size: 0.15rem;
-                  font-weight: bold;
-                  color: #999;
-                  margin-left: 0.1rem;
-                  &.active {
-                    color: #ff5200;
-                  }
-                }
               }
             }
           }

src/pages/index copy.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="MainPage flex-v">
-
-    <!-- 头部 -->
-    <div class="MainHeaderPadding" v-if="ShowMainHeader" :style="{height: `${MainPaddingTop}px`}"></div>
-    <div class="MainHeader flex-h" v-if="ShowMainHeader">
-      <a class="MainBack iconfont iconjiantouleft" v-if="ShowMainHeaderBack" @click="$router.back(-1)"></a>
-      <span class="MainTitle">
-        <span @click="MainTitleClick()">{{MainHeaderTitle}}</span>
-        <a class="iconfont iconjiantoudown" @click="MainTitleClick()" v-if="ShowMainTitleIcon"></a>
-      </span>
-      <a class="MainHeaderRight" v-if="ShowMainHeaderRight" @click="MainHeaderRightClick()">
-        <i class="iconfont" :class="MainHeaderRightIcon"></i>
-        <span>{{MainHeaderRightText}}</span>
-      </a>
-    </div>
-
-    <!-- 内容 -->
-    <div class="MainBody flex-item">
-      <div>
-        <router-view></router-view>
-      </div>
-    </div>
-
-    <!-- tabbar -->
-    <div class="TabBar flex-h" :style="{paddingBottom: `${MainPaddingBottom}px`}" v-if="ShowMainTabBar">
-      <div class="flex-item" v-for="(item, index) in MainTabBar" :key="index">
-        <router-link :to="{name: item.router}" :class="{'active': item.id === MainTabBarActiveId}">
-          <i class="iconfont" :class="item.icon"></i>
-          <span>{{item.name}}</span>
-        </router-link>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-import md5 from 'js-md5'
-import { mapState, mapActions, mapMutations, createNamespacedHelpers } from 'vuex'
-const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
-export default {
-  name: '',
-  data () {
-    return {
-      Timer: null
-    }
-  },
-  computed: {
-    ...mapState({
-      ShowMainHeaderRight: x => x.ShowMainHeaderRight, // 显隐头部右边选项
-      MainHeaderRightIcon: x => x.MainHeaderRightIcon, // 头部右边选项图标
-      MainHeaderRightText: x => x.MainHeaderRightText, // 头部右边选项文本
-      MainHeaderRightClick: x => x.MainHeaderRightClick, // 头部右边选项点击事件
-      MainTitleClick: x => x.MainTitleClick, // 页面标题点击事件
-      ShowMainTitleIcon: x => x.ShowMainTitleIcon, // 显隐页面标题箭头图标
-      ShowMainHeaderBack: x => x.ShowMainHeaderBack, // 显隐头部返回按钮
-      MainTabBar: x => x.MainTabBar, // tabbar列表
-      MainTabBarActiveId: x => x.MainTabBarActiveId, // tabbar索引值
-      ShowMainHeader: x => x.ShowMainHeader, // 显隐页面头部
-      ShowMainTabBar: x => x.ShowMainTabBar, // 显隐页面tabbar
-      MainPaddingTop: x => x.MainPaddingTop, // 页面padding-top（不与系统顶部时间栏重叠）
-      MainPaddingBottom: x => x.MainPaddingBottom, // 页面padding-bottom（不与系统底部返回栏重叠）
-      MainHeaderTitle: x => x.MainHeaderTitle // 页面title
-    }),
-    ...mapUserState({
-      UserInfo: x => x.UserInfo // 用户信息
-    })
-  },
-  components: {
-  },
-  created () {
-    this.EditMainData({ name: 'MainPaddingBottom', value: 10 })
-  },
-  mounted () {
-    this.$nextTick(() => {
-      this.Init()
-    })
-  },
-  methods: {
-    ...mapActions([
-      'GetFootballKeys',
-      'GetAllLotteryType'
-    ]),
-    ...mapMutations([
-      'EditMainData'
-    ]),
-    ...mapUserActions([
-      'SignIn'
-    ]),
-    Init () { // 初始化
-      if (window.localStorage.niucaiusername && window.localStorage.niucaiuserpassword) {
-        this.SignIn({ data: { password: md5(window.localStorage.niucaiuserpassword), userName: window.localStorage.niucaiusername } }).then(() => { // 登录
-          if (this.UserInfo === null) {
-            this.$router.push({ name: 'SignIn' })
-          } else {
-            this.GetFootballKeys() // 获取足彩相关字典
-            this.GetAllLotteryType({ queryData: { pageNum: 1, pageSize: 1000 } })
-          }
-        }).catch(() => {
-        })
-      } else {
-        this.$router.push({ name: 'SignIn' })
-      }
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-@import "page.scss";
-</style>

src/pages/index/DaLeTou/index.vue

@@ -1,112 +1,98 @@
 <template>
-  <div class="Page flex-v">
-
-    <div class="Top">
-      <!-- <div class="Time flex-h">
-        <div class="Icon">
-          <img src="../../../assets/img/icon4.png" class="centerLabel contain" alt="">
-        </div>
-        <div class="flex-item">
-          <div>
-            <span>剩余时间：</span>
-            <span>20:20:20</span>
-          </div>
-        </div>
-        <div class="flex-item">
-          <div>
-            <i class="iconfont iconliwu"></i>
-            <span class="active">20:20 开奖</span>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="大乐透">
+      <div class="PageContainer flex-v">
+        <div class="Top">
+          <div class="PrevRes flex-h">
+            <span>077期</span>
+            <div class="flex-item">
+              <div>
+                <span>01</span>
+                <span>02</span>
+                <span>03</span>
+                <span>04</span>
+                <span>05</span>
+                <span class="active">06</span>
+                <span class="active">07</span>
+              </div>
+            </div>
           </div>
         </div>
-      </div> -->
-      <div class="PrevRes flex-h">
-        <span>077期</span>
+
+        <!-- 选区 -->
         <div class="flex-item">
           <div>
-            <span>01</span>
-            <span>02</span>
-            <span>03</span>
-            <span>04</span>
-            <span>05</span>
-            <span class="active">06</span>
-            <span class="active">07</span>
-          </div>
-        </div>
-      </div>
-    </div>
+            <div>
+              <div class="SelectArea">
 
-    <!-- 选区 -->
-    <div class="flex-item">
-      <div>
-        <div>
-          <div class="SelectArea">
+                <!-- 号码池 -->
+                <div class="NumberList">
+                  <div class="Title flex-h">
+                    <span class="flex-item">选中号码两次设胆</span>
+                    <!-- <a @click="ShowMiss = !ShowMiss">{{ShowMiss ? '隐藏' : '显示'}}遗漏</a> -->
+                  </div>
+                  <ul>
+                    <li v-for="(item, index) in FirstList" :key="index">
+                      <a :class="{'active': item.Active - 0 !== 0}" @click="SelectFirstItem(item, index)">
+                        <div class="centerLabel">
+                          <span>{{item.Num}}</span>
+                          <span v-if="item.Active - 0 === 2">胆</span>
+                        </div>
+                      </a>
+                      <span v-if="ShowMiss">{{item.MissNum}}</span>
+                    </li>
+                  </ul>
+                  <ul>
+                    <li v-for="(item, index) in LastList" :key="index">
+                      <a :class="{'active': item.Active - 0 !== 0}" @click="SelectLastItem(item, index)">
+                        <div class="centerLabel">
+                          <span>{{item.Num}}</span>
+                          <span v-if="item.Active - 0 === 2">胆</span>
+                        </div>
+                      </a>
+                      <span v-if="ShowMiss">{{item.MissNum}}</span>
+                    </li>
+                  </ul>
+                </div>
 
-            <!-- 号码池 -->
-            <div class="NumberList">
-              <div class="Title flex-h">
-                <span class="flex-item">选中号码两次设胆</span>
-                <!-- <a @click="ShowMiss = !ShowMiss">{{ShowMiss ? '隐藏' : '显示'}}遗漏</a> -->
-              </div>
-              <ul>
-                <li v-for="(item, index) in FirstList" :key="index">
-                  <a :class="{'active': item.Active - 0 !== 0}" @click="SelectFirstItem(item, index)">
-                    <div class="centerLabel">
-                      <span>{{item.Num}}</span>
-                      <span v-if="item.Active - 0 === 2">胆</span>
-                    </div>
-                  </a>
-                  <span v-if="ShowMiss">{{item.MissNum}}</span>
-                </li>
-              </ul>
-              <ul>
-                <li v-for="(item, index) in LastList" :key="index">
-                  <a :class="{'active': item.Active - 0 !== 0}" @click="SelectLastItem(item, index)">
-                    <div class="centerLabel">
-                      <span>{{item.Num}}</span>
-                      <span v-if="item.Active - 0 === 2">胆</span>
-                    </div>
-                  </a>
-                  <span v-if="ShowMiss">{{item.MissNum}}</span>
-                </li>
-              </ul>
-            </div>
+                <!-- 快速选区 -->
+                <div class="FastSelect">
+                  <span>快速选区</span>
+                  <div>
+                    <a @click="RandomOne" :class="{'active': FastSelectIndex === 0}">+机选1注</a>
+                    <a :class="{'active': FastSelectIndex === 1}" @click="RandomFive">+机选5注</a>
+                    <a @click="SelectAllLastArr" :class="{'active': FastSelectIndex === 2}">后区全包 <span>必中</span></a>
+                  </div>
+                </div>
 
-            <!-- 快速选区 -->
-            <div class="FastSelect">
-              <span>快速选区</span>
-              <div>
-                <a @click="RandomOne" :class="{'active': FastSelectIndex === 0}">+机选1注</a>
-                <a :class="{'active': FastSelectIndex === 1}" @click="RandomFive">+机选5注</a>
-                <a @click="SelectAllLastArr" :class="{'active': FastSelectIndex === 2}">后区全包 <span>必中</span></a>
               </div>
             </div>
-
           </div>
         </div>
-      </div>
-    </div>
 
-    <!-- 投注栏 -->
-    <div class="Bottom flex-h">
-      <a class="iconfont iconjian Delete"></a>
-      <div class="flex-item">
-        <div>
-          <div v-if="TotalResNum">
-            <span>￥{{TotalResNum * 2}}</span>
-            <span>{{TotalResNum}}注</span>
+        <!-- 投注栏 -->
+        <div class="Bottom flex-h">
+          <a class="iconfont iconjian Delete"></a>
+          <div class="flex-item">
+            <div>
+              <div v-if="TotalResNum">
+                <span>￥{{TotalResNum * 2}}</span>
+                <span>{{TotalResNum}}注</span>
+              </div>
+              <span v-else>至少选5橙球2蓝球</span>
+            </div>
           </div>
-          <span v-else>至少选5橙球2蓝球</span>
+          <a class="Btn" :class="{'active': CanCreateRes}" @click="AddToCart">加入选号</a>
+          <a class="Btn" :class="{'active': CanCreateRes}" @click="CreateOrder">投注</a>
         </div>
       </div>
-      <a class="Btn" :class="{'active': CanCreateRes}" @click="AddToCart">加入选号</a>
-      <a class="Btn" :class="{'active': CanCreateRes}" @click="CreateOrder">投注</a>
-    </div>
-
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -125,13 +111,9 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '大乐透' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.CreatNumList() // 创建号码池数据
   },
   mounted () {
@@ -139,9 +121,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserMutations([
       'AddDaLeTouCart' // 新增大乐透购物车
     ]),

src/pages/index/DaLeTou/page.scss

@@ -1,322 +1,331 @@
 .Page {
   background: #f8f8f8;
+  width: 100%;
+  height: 100%;
   position: relative;
-  > .Top {
-    background: #fff;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
     position: relative;
-    z-index: 2;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    > .Time {
-      align-items: center;
-      border-bottom: 0.01rem solid #f7f7f7;
-      > .Icon {
-        width: 0.16rem;
-        height: 0.16rem;
-        position: relative;
-        overflow: hidden;
-        margin-left: 0.15rem;
-        margin-right: 0.65rem;
-      }
-      > .flex-item {
-        position: relative;
-        > div {
-          width: 100%;
+    overflow: hidden;
+    > .Top {
+      background: #fff;
+      position: relative;
+      z-index: 2;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      > .Time {
+        align-items: center;
+        border-bottom: 0.01rem solid #f7f7f7;
+        > .Icon {
+          width: 0.16rem;
+          height: 0.16rem;
           position: relative;
           overflow: hidden;
-          font-size: 0;
-          white-space: nowrap;
-          text-align: right;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.12rem;
-            color: #9a9a9a;
-            line-height: 0.28rem;
-            &.active {
+          margin-left: 0.15rem;
+          margin-right: 0.65rem;
+        }
+        > .flex-item {
+          position: relative;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            font-size: 0;
+            white-space: nowrap;
+            text-align: right;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.12rem;
+              color: #9a9a9a;
+              line-height: 0.28rem;
+              &.active {
+                color: #ff5200;
+                margin-right: 0.15rem;
+              }
+            }
+            > i {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.15rem;
               color: #ff5200;
-              margin-right: 0.15rem;
+              margin-right: 0.05rem;
             }
           }
-          > i {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.15rem;
-            color: #ff5200;
-            margin-right: 0.05rem;
-          }
         }
       }
-    }
-    > .PrevRes {
-      align-items: center;
-      > span {
-        font-size: 0.12rem;
-        color: #9a9a9a;
-        line-height: 0.34rem;
-        margin-left: 0.15rem;
-        margin-right: 0.15rem;
-      }
-      > div {
-        position: relative;
-        overflow: hidden;
+      > .PrevRes {
+        align-items: center;
+        > span {
+          font-size: 0.12rem;
+          color: #9a9a9a;
+          line-height: 0.34rem;
+          margin-left: 0.15rem;
+          margin-right: 0.15rem;
+        }
         > div {
-          width: 100%;
           position: relative;
           overflow: hidden;
-          font-size: 0;
-          white-space: nowrap;
-          height: 0.18rem;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            color: #fff;
-            margin-left: 0.05rem;
-            width: 0.18rem;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            font-size: 0;
+            white-space: nowrap;
             height: 0.18rem;
-            line-height: 0.18rem;
-            text-align: center;
-            background: #ff5200;
-            border-radius: 100%;
-            &.active {
-              background: #4064e5;
-            }
-            &:first-child {
-              margin-left: 0;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              color: #fff;
+              margin-left: 0.05rem;
+              width: 0.18rem;
+              height: 0.18rem;
+              line-height: 0.18rem;
+              text-align: center;
+              background: #ff5200;
+              border-radius: 100%;
+              &.active {
+                background: #4064e5;
+              }
+              &:first-child {
+                margin-left: 0;
+              }
             }
           }
         }
       }
     }
-  }
-  > .flex-item {
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
+    > .flex-item {
+      position: relative;
       overflow: hidden;
+      z-index: 1;
       > div {
         width: 100%;
-        height: 100%;
-        position: relative;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        > .SelectArea {
-          padding: 0.15rem;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        > div {
+          width: 100%;
+          height: 100%;
           position: relative;
-          overflow: hidden;
-          > .NumberList {
-            background: #fff;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-            border-radius: 0.06rem;
-            > .Title {
-              align-items: center;
-              border-bottom: 0.01rem solid #f7f7f7;
-              > span {
-                font-size: 0.15rem;
-                line-height: 0.4rem;
-                text-indent: 0.15rem;
-              }
-              > a {
-                font-size: 0.1rem;
-                color: #ff5200;
-                margin-right: 0.15rem;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          > .SelectArea {
+            padding: 0.15rem;
+            position: relative;
+            overflow: hidden;
+            > .NumberList {
+              background: #fff;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+              border-radius: 0.06rem;
+              > .Title {
+                align-items: center;
+                border-bottom: 0.01rem solid #f7f7f7;
+                > span {
+                  font-size: 0.15rem;
+                  line-height: 0.4rem;
+                  text-indent: 0.15rem;
+                }
+                > a {
+                  font-size: 0.1rem;
+                  color: #ff5200;
+                  margin-right: 0.15rem;
+                }
               }
-            }
-            > ul {
-              border-bottom: 0.01rem solid #f7f7f7;
-              font-size: 0;
-              padding: 0 0.1rem 0.14rem;
-              &:last-child {
-                border-bottom: none;
+              > ul {
+                border-bottom: 0.01rem solid #f7f7f7;
+                font-size: 0;
+                padding: 0 0.1rem 0.14rem;
+                &:last-child {
+                  border-bottom: none;
+                  > li {
+                    > a {
+                      border-color: #3f63e5;
+                      &.active {
+                        background: #3f63e5;
+                      }
+                      > div {
+                        > span {
+                          color: #3f63e5;
+                        }
+                      }
+                    }
+                  }
+                }
                 > li {
+                  display: inline-block;
+                  vertical-align: middle;
+                  margin-left: 0.14rem;
+                  margin-top: 0.14rem;
+                  &:nth-child(7n + 1) {
+                    margin-left: 0;
+                  }
                   > a {
-                    border-color: #3f63e5;
+                    width: 0.32rem;
+                    height: 0.32rem;
+                    display: block;
+                    margin: 0 auto;
+                    border-radius: 100%;
+                    border: 0.01rem solid #ff5200;
+                    position: relative;
+                    overflow: hidden;
                     &.active {
-                      background: #3f63e5;
+                      background: #ff5200;
+                      > div {
+                        > span {
+                          color: #fff;
+                        }
+                      }
                     }
                     > div {
+                      width: 100%;
                       > span {
-                        color: #3f63e5;
+                        display: block;
+                        text-align: center;
+                        font-size: 0.1rem;
+                        color: #ff5200;
+                        line-height: 0.14rem;
+                        &:only-child {
+                          font-size: 0.13rem;
+                        }
                       }
                     }
                   }
+                  > span {
+                    display: block;
+                    text-align: center;
+                    font-size: 0.12rem;
+                    color: #666;
+                    line-height: 0.18rem;
+                  }
                 }
               }
-              > li {
-                display: inline-block;
-                vertical-align: middle;
-                margin-left: 0.14rem;
-                margin-top: 0.14rem;
-                &:nth-child(7n + 1) {
-                  margin-left: 0;
-                }
+            }
+            > .FastSelect {
+              background: #fff;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+              border-radius: 0.06rem;
+              margin-top: 0.15rem;
+              position: relative;
+              overflow: hidden;
+              > span {
+                display: block;
+                font-size: 0.15rem;
+                line-height: 0.4rem;
+                border-bottom: 0.01rem solid #f7f7f7;
+                text-indent: 0.15rem;
+              }
+              > div {
+                font-size: 0;
+                padding: 0.05rem 0.15rem 0.15rem 0.15rem;
                 > a {
-                  width: 0.32rem;
-                  height: 0.32rem;
-                  display: block;
-                  margin: 0 auto;
-                  border-radius: 100%;
+                  display: inline-block;
+                  font-size: 0.15rem;
+                  line-height: 0.32rem;
+                  border-radius: 0.06rem;
                   border: 0.01rem solid #ff5200;
+                  width: 1.5rem;
+                  text-align: center;
+                  margin-left: 0.1rem;
+                  margin-top: 0.1rem;
                   position: relative;
                   overflow: hidden;
+                  &:nth-child(2n + 1) {
+                    margin-left: 0;
+                  }
                   &.active {
                     background: #ff5200;
-                    > div {
-                      > span {
-                        color: #fff;
-                      }
-                    }
+                    color: #fff;
                   }
-                  > div {
-                    width: 100%;
-                    > span {
-                      display: block;
-                      text-align: center;
-                      font-size: 0.1rem;
-                      color: #ff5200;
-                      line-height: 0.14rem;
-                      &:only-child {
-                        font-size: 0.13rem;
-                      }
-                    }
+                  > span {
+                    display: inline-block;
+                    position: absolute;
+                    font-size: 0.1rem;
+                    right: 0;
+                    top: 0;
+                    line-height: 0.14rem;
+                    background: #ff5200;
+                    color: #fff;
+                    padding: 0 0.05rem;
+                    border-radius: 0 0 0 0.06rem;
                   }
                 }
-                > span {
-                  display: block;
-                  text-align: center;
-                  font-size: 0.12rem;
-                  color: #666;
-                  line-height: 0.18rem;
-                }
-              }
-            }
-          }
-          > .FastSelect {
-            background: #fff;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-            border-radius: 0.06rem;
-            margin-top: 0.15rem;
-            position: relative;
-            overflow: hidden;
-            > span {
-              display: block;
-              font-size: 0.15rem;
-              line-height: 0.4rem;
-              border-bottom: 0.01rem solid #f7f7f7;
-              text-indent: 0.15rem;
-            }
-            > div {
-              font-size: 0;
-              padding: 0.05rem 0.15rem 0.15rem 0.15rem;
-              > a {
-                display: inline-block;
-                font-size: 0.15rem;
-                line-height: 0.32rem;
-                border-radius: 0.06rem;
-                border: 0.01rem solid #ff5200;
-                width: 1.5rem;
-                text-align: center;
-                margin-left: 0.1rem;
-                margin-top: 0.1rem;
-                position: relative;
-                overflow: hidden;
-                &:nth-child(2n + 1) {
-                  margin-left: 0;
-                }
-                &.active {
-                  background: #ff5200;
-                  color: #fff;
-                }
-                > span {
-                  display: inline-block;
-                  position: absolute;
-                  font-size: 0.1rem;
-                  right: 0;
-                  top: 0;
-                  line-height: 0.14rem;
-                  background: #ff5200;
-                  color: #fff;
-                  padding: 0 0.05rem;
-                  border-radius: 0 0 0 0.06rem;
-                }
               }
             }
           }
         }
       }
     }
-  }
-  > .Bottom {
-    background: #fff;
-    padding: 0.05rem 0.15rem;
-    align-items: center;
-    position: relative;
-    z-index: 2;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    > .Delete {
-      font-size: 0.24rem;
-      color: #ff5200;
-      margin-right: 0.1rem;
-    }
-    > .flex-item {
+    > .Bottom {
+      background: #fff;
+      padding: 0.05rem 0.15rem;
+      align-items: center;
       position: relative;
-      > div {
-        width: 100%;
+      z-index: 2;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      > .Delete {
+        font-size: 0.24rem;
+        color: #ff5200;
+        margin-right: 0.1rem;
+      }
+      > .flex-item {
         position: relative;
-        font-size: 0;
-        white-space: nowrap;
-        text-align: right;
         > div {
-          display: inline-block;
-          vertical-align: middle;
-          float: left;
+          width: 100%;
+          position: relative;
+          font-size: 0;
+          white-space: nowrap;
+          text-align: right;
+          > div {
+            display: inline-block;
+            vertical-align: middle;
+            float: left;
+            > span {
+              display: block;
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              color: #666;
+              text-align: center;
+              &:first-child {
+                color: #ff5200;
+                font-size: 0.15rem;
+                font-weight: bold;
+              }
+            }
+          }
           > span {
-            display: block;
-            font-size: 0.12rem;
-            line-height: 0.2rem;
+            display: inline-block;
+            vertical-align: middle;
+            font-size: 0.14rem;
             color: #666;
-            text-align: center;
-            &:first-child {
-              color: #ff5200;
-              font-size: 0.15rem;
-              font-weight: bold;
-            }
+            line-height: 0.4rem;
           }
         }
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 0.14rem;
-          color: #666;
-          line-height: 0.4rem;
-        }
       }
-    }
-    > .Btn {
-      line-height: 0.28rem;
-      font-size: 0.13rem;
-      color: #ccc;
-      border: 0.01rem solid #ccc;
-      border-radius: 0.02rem;
-      margin-left: 0.15rem;
-      width: 0.6rem;
-      text-align: center;
-      &:last-child {
-        color: #fff;
-        background: #ccc;
-      }
-      &.active {
-        color: #ff5200;
-        border: 0.01rem solid #ff5200;
+      > .Btn {
+        line-height: 0.28rem;
+        font-size: 0.13rem;
+        color: #ccc;
+        border: 0.01rem solid #ccc;
+        border-radius: 0.02rem;
+        margin-left: 0.15rem;
+        width: 0.6rem;
+        text-align: center;
         &:last-child {
           color: #fff;
-          background: #ff5200;
+          background: #ccc;
+        }
+        &.active {
+          color: #ff5200;
+          border: 0.01rem solid #ff5200;
+          &:last-child {
+            color: #fff;
+            background: #ff5200;
+          }
         }
       }
     }

src/pages/index/DaLeTouDingDan/index.vue

@@ -1,98 +1,102 @@
 <template>
-  <div class="Page flex-v">
-    <div class="flex-item">
-      <div>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="大乐透">
+      <div class="PageContainer flex-v">
+        <div class="flex-item">
+          <div>
 
-        <ul>
-          <li v-for="(item, index) in PageList" :key="index">
-            <a class="iconfont iconguanbi Close" @click="DeleteItem(index)"></a>
-            <div class="flex-h">
-              <span class="flex-item">{{ReturnType(item)}}<em>{{item.Count}}</em>注<em>{{item.Count * 2}}</em>元</span>
-            </div>
             <ul>
-              <li v-for="(subItem, subIndex) in item.SortArr" :key="subIndex" :class="{'active': !subItem.IsFirst}">
-                <div class="centerLabel">
-                  <span>{{subItem.Num}}</span>
-                  <span v-if="subItem.IsDan">胆</span>
+              <li v-for="(item, index) in PageList" :key="index">
+                <a class="iconfont iconguanbi Close" @click="DeleteItem(index)"></a>
+                <div class="flex-h">
+                  <span class="flex-item">{{ReturnType(item)}}<em>{{item.Count}}</em>注<em>{{item.Count * 2}}</em>元</span>
                 </div>
+                <ul>
+                  <li v-for="(subItem, subIndex) in item.SortArr" :key="subIndex" :class="{'active': !subItem.IsFirst}">
+                    <div class="centerLabel">
+                      <span>{{subItem.Num}}</span>
+                      <span v-if="subItem.IsDan">胆</span>
+                    </div>
+                  </li>
+                </ul>
               </li>
             </ul>
-          </li>
-        </ul>
 
-        <div class="OtherTab">
-          <div>
-            <div class="flex-h">
-              <span class="flex-item">加倍</span>
-              <span>
-                <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1"></a>
-                <input type="number" disabled="disabled" v-model="Multiple">
-                <span>倍</span>
-                <a class="iconfont iconjiahao" @click="Multiple += 1"></a>
-              </span>
-            </div>
-            <div class="flex-h">
-              <span class="flex-item">是否追期？</span>
-              <span>追号喜中二等奖</span>
-              <van-switch v-model="IsAdd" active-color="#07c160" inactive-color="#ccc" size="0.13rem" @change="SwitchChange" />
+            <div class="OtherTab">
+              <div>
+                <div class="flex-h">
+                  <span class="flex-item">加倍</span>
+                  <span>
+                    <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1"></a>
+                    <input type="number" disabled="disabled" v-model="Multiple">
+                    <span>倍</span>
+                    <a class="iconfont iconjiahao" @click="Multiple += 1"></a>
+                  </span>
+                </div>
+                <div class="flex-h">
+                  <span class="flex-item">是否追期？</span>
+                  <span>追号喜中二等奖</span>
+                  <van-switch v-model="IsAdd" active-color="#07c160" inactive-color="#ccc" size="0.13rem" @change="SwitchChange" />
+                </div>
+              </div>
             </div>
+
           </div>
         </div>
 
-      </div>
-    </div>
-
-    <div class="Bottom">
-      <div class="Store">
-        <a @click="ShowStore = true">店铺：{{CurrentStoreName || '请选择'}}</a>
-      </div>
-      <div class="Count">
-        <span><em>{{TotalCount}}</em>注</span>
-        <span>金额：<em>{{TotalPrize * Multiple}}</em>元</span>
-      </div>
-      <a @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && DaLeTouCart.length}">立即购买</a>
-    </div>
+        <div class="Bottom">
+          <div class="Store">
+            <a @click="ShowStore = true">店铺：{{CurrentStoreName || '请选择'}}</a>
+          </div>
+          <div class="Count">
+            <span><em>{{TotalCount}}</em>注</span>
+            <span>金额：<em>{{TotalPrize * Multiple}}</em>元</span>
+          </div>
+          <a @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && DaLeTouCart.length}">立即购买</a>
+        </div>
 
-    <div class="Layer" v-if="ShowStore">
-      <div class="centerLabel">
-        <span v-if="RecommendStoreList.length">推荐店铺：</span>
-        <ul v-if="RecommendStoreList.length">
-          <li v-for="(item, index) in RecommendStoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
-            <div class="flex-item">
-              <div>
-                <span>{{item.name}}</span>
-              </div>
-            </div>
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <span>选择附近店铺：</span>
-        <ul class="ScrollList">
-          <li v-for="(item, index) in StoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
-            <div class="flex-item">
-              <div>
-                <span>{{item.name}}</span>
-              </div>
+        <div class="Layer" v-if="ShowStore">
+          <div class="centerLabel">
+            <span v-if="RecommendStoreList.length">推荐店铺：</span>
+            <ul v-if="RecommendStoreList.length">
+              <li v-for="(item, index) in RecommendStoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <span>选择附近店铺：</span>
+            <ul class="ScrollList">
+              <li v-for="(item, index) in StoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <!-- <span>200m</span> -->
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <div class="Bottom flex-h">
+              <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
+              <a class="flex-item active" @click="ShowStore = false">确定</a>
             </div>
-            <!-- <span>200m</span> -->
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <div class="Bottom flex-h">
-          <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
-          <a class="flex-item active" @click="ShowStore = false">确定</a>
+          </div>
         </div>
       </div>
-    </div>
-
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
+import MainPageContainer from '../../../components/common/MainPageContainer'
 import { Switch } from 'vant'
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -117,14 +121,10 @@ export default {
     })
   },
   components: {
-    'van-switch': Switch
+    'van-switch': Switch,
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '大乐透' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.PageList = [...this.DaLeTouCart]
     this.CheckOrderCount() // 计算订单倍数、金额
     this.GetStoreList({
@@ -142,9 +142,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserMutations([
       'DeleteDaLeTouCart',
       'EmptyDaLeTouCart'

src/pages/index/DaLeTouDingDan/page.scss

@@ -1,184 +1,192 @@
 .Page {
   background: #f8f8f8;
+  width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
-  > div {
-    &.flex-item {
-      position: relative;
-      overflow: hidden;
-      z-index: 1;
-      > div {
-        width: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        > ul {
-          padding: 0.15rem;
-          position: relative;
-          > li {
-            background: #fff;
-            position: relative;
-            overflow: visible;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    > div {
+      &.flex-item {
+        position: relative;
+        overflow: hidden;
+        z-index: 1;
+        > div {
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          > ul {
             padding: 0.15rem;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-            margin-top: 0.15rem;
-            border-radius: 0.06rem;
-            &:first-child {
-              margin-top: 0;
-            }
-            > .Close {
-              display: inline-block;
-              position: absolute;
-              right: 0;
-              top: 0;
-              font-size: 0.2rem;
-              color: #999;
-            }
-            > div {
-              align-items: center;
-              > span {
-                &:first-child {
-                  font-size: 0.12rem;
-                  line-height: 0.2rem;
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  > em {
-                    color: #d91d36;
+            position: relative;
+            > li {
+              background: #fff;
+              position: relative;
+              overflow: visible;
+              padding: 0.15rem;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+              margin-top: 0.15rem;
+              border-radius: 0.06rem;
+              &:first-child {
+                margin-top: 0;
+              }
+              > .Close {
+                display: inline-block;
+                position: absolute;
+                right: 0;
+                top: 0;
+                font-size: 0.2rem;
+                color: #999;
+              }
+              > div {
+                align-items: center;
+                > span {
+                  &:first-child {
                     font-size: 0.12rem;
                     line-height: 0.2rem;
-                    font-weight: bold;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    > em {
+                      color: #d91d36;
+                      font-size: 0.12rem;
+                      line-height: 0.2rem;
+                      font-weight: bold;
+                    }
                   }
                 }
               }
-            }
-            > ul {
-              font-size: 0;
-              > li {
-                display: inline-block;
-                vertical-align: middle;
-                width: 0.32rem;
-                height: 0.32rem;
-                border-radius: 100%;
-                position: relative;
-                overflow: hidden;
-                background: #ff5200;
-                margin-right: 0.12rem;
-                margin-top: 0.1rem;
-                &.active {
-                  background: #3f63e5;
-                }
-                > div {
-                  width: 100%;
-                  > span {
-                    font-size: 0.12rem;
-                    display: block;
-                    text-align: center;
-                    color: #fff;
-                    line-height: 0.14rem;
+              > ul {
+                font-size: 0;
+                > li {
+                  display: inline-block;
+                  vertical-align: middle;
+                  width: 0.32rem;
+                  height: 0.32rem;
+                  border-radius: 100%;
+                  position: relative;
+                  overflow: hidden;
+                  background: #ff5200;
+                  margin-right: 0.12rem;
+                  margin-top: 0.1rem;
+                  &.active {
+                    background: #3f63e5;
+                  }
+                  > div {
+                    width: 100%;
+                    > span {
+                      font-size: 0.12rem;
+                      display: block;
+                      text-align: center;
+                      color: #fff;
+                      line-height: 0.14rem;
+                    }
                   }
                 }
               }
             }
           }
-        }
-        > .OtherTab {
-          padding: 0 0.15rem;
-          position: relative;
-          margin-bottom: 0.15rem;
-          > div {
-            background: #fff;
-            border-radius: 0.06rem;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+          > .OtherTab {
+            padding: 0 0.15rem;
+            position: relative;
+            margin-bottom: 0.15rem;
             > div {
-              padding: 0.15rem;
-              border-top: 0.01rem solid #f7f7f7;
-              align-items: center;
-              &:first-child {
-                border-top: none;
-              }
-              &:nth-child(1) {
-                > span {
-                  &:nth-child(1) {
-                    font-size: 0.15rem;
-                    color: #666;
-                    line-height: 0.2rem;
-                  }
-                  &:nth-child(2) {
-                    display: inline-block;
-                    margin-left: 0.1rem;
-                    position: relative;
-                    overflow: hidden;
-                    border: 0.01rem solid #f7f7f7;
-                    border-radius: 0.03rem;
-                    font-size: 0;
-                    white-space: nowrap;
-                    > * {
-                      display: inline-block;
-                      vertical-align: middle;
-                      font-size: 0.14rem;
-                      color: #999;
+              background: #fff;
+              border-radius: 0.06rem;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+              > div {
+                padding: 0.15rem;
+                border-top: 0.01rem solid #f7f7f7;
+                align-items: center;
+                &:first-child {
+                  border-top: none;
+                }
+                &:nth-child(1) {
+                  > span {
+                    &:nth-child(1) {
+                      font-size: 0.15rem;
+                      color: #666;
                       line-height: 0.2rem;
-                      border-left: 0.01rem solid #f7f7f7;
-                      &:first-child {
-                        border: none;
-                        border-right: 0.01rem solid #f7f7f7;
-                      }
-                    }
-                    > a {
-                      width: 0.2rem;
-                      text-align: center;
                     }
-                    > input {
-                      border: none;
-                      width: 0.35rem;
-                      text-align: center;
-                      color: #333;
-                      &:disabled {
+                    &:nth-child(2) {
+                      display: inline-block;
+                      margin-left: 0.1rem;
+                      position: relative;
+                      overflow: hidden;
+                      border: 0.01rem solid #f7f7f7;
+                      border-radius: 0.03rem;
+                      font-size: 0;
+                      white-space: nowrap;
+                      > * {
+                        display: inline-block;
+                        vertical-align: middle;
+                        font-size: 0.14rem;
+                        color: #999;
+                        line-height: 0.2rem;
+                        border-left: 0.01rem solid #f7f7f7;
+                        &:first-child {
+                          border: none;
+                          border-right: 0.01rem solid #f7f7f7;
+                        }
+                      }
+                      > a {
+                        width: 0.2rem;
+                        text-align: center;
+                      }
+                      > input {
+                        border: none;
+                        width: 0.35rem;
+                        text-align: center;
                         color: #333;
+                        &:disabled {
+                          color: #333;
+                        }
+                      }
+                      > span {
+                        border: none;
+                        margin-right: 0.03rem;
                       }
-                    }
-                    > span {
-                      border: none;
-                      margin-right: 0.03rem;
                     }
                   }
                 }
-              }
-              &:nth-child(2) {
-                > span {
-                  &:nth-child(1) {
-                    font-size: 0.15rem;
-                    color: #666;
-                    line-height: 0.2rem;
-                  }
-                  &:nth-child(2) {
-                    font-size: 0.1rem;
-                    color: #fff;
-                    display: inline-block;
-                    position: relative;
-                    overflow: visible;
-                    background: #ff5200;
-                    border-radius: 0.02rem;
-                    padding: 0 0.05rem;
-                    line-height: 0.16rem;
-                    margin-right: 0.1rem;
-                    &::after {
-                      content: "";
-                      width: 0;
-                      height: 0;
-                      border-width: 0.04rem;
-                      display: block;
-                      position: absolute;
-                      right: -0.07rem;
-                      top: 50%;
-                      transform: translateY(-50%) rotateZ(90deg);
-                      -webkit-transform: translateY(-50%) rotateZ(90deg);
-                      border-style: solid solid dashed solid;
-                      border-color: transparent transparent #ff5200 transparent;
+                &:nth-child(2) {
+                  > span {
+                    &:nth-child(1) {
+                      font-size: 0.15rem;
+                      color: #666;
+                      line-height: 0.2rem;
+                    }
+                    &:nth-child(2) {
+                      font-size: 0.1rem;
+                      color: #fff;
+                      display: inline-block;
+                      position: relative;
+                      overflow: visible;
+                      background: #ff5200;
+                      border-radius: 0.02rem;
+                      padding: 0 0.05rem;
+                      line-height: 0.16rem;
+                      margin-right: 0.1rem;
+                      &::after {
+                        content: "";
+                        width: 0;
+                        height: 0;
+                        border-width: 0.04rem;
+                        display: block;
+                        position: absolute;
+                        right: -0.07rem;
+                        top: 50%;
+                        transform: translateY(-50%) rotateZ(90deg);
+                        -webkit-transform: translateY(-50%) rotateZ(90deg);
+                        border-style: solid solid dashed solid;
+                        border-color: transparent transparent #ff5200 transparent;
+                      }
                     }
                   }
                 }
@@ -187,146 +195,146 @@
           }
         }
       }
-    }
-    &.Bottom {
-      background: #fff;
-      position: relative;
-      overflow: hidden;
-      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-      z-index: 2;
-      padding: 0.15rem;
-      padding-bottom: 0.2rem;
-      > .Store {
-        font-size: 0;
-        text-align: center;
-        > a {
-          display: inline-block;
-          font-size: 0.14rem;
-          color: #333;
-          line-height: 0.2rem;
-          max-width: 100%;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-      }
-      > .Count {
-        font-size: 0;
-        text-align: center;
-        white-space: nowrap;
-        margin-top: 0.05rem;
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 0.12rem;
-          color: #333;
-          line-height: 0.2rem;
-          margin-left: 0.1rem;
-          &:first-child {
-            margin-left: 0;
+      &.Bottom {
+        background: #fff;
+        position: relative;
+        overflow: hidden;
+        box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+        z-index: 2;
+        padding: 0.15rem;
+        padding-bottom: 0.2rem;
+        > .Store {
+          font-size: 0;
+          text-align: center;
+          > a {
+            display: inline-block;
+            font-size: 0.14rem;
+            color: #333;
+            line-height: 0.2rem;
+            max-width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
           }
-          > em {
-            color: #d91d36;
+        }
+        > .Count {
+          font-size: 0;
+          text-align: center;
+          white-space: nowrap;
+          margin-top: 0.05rem;
+          > span {
+            display: inline-block;
+            vertical-align: middle;
             font-size: 0.12rem;
+            color: #333;
             line-height: 0.2rem;
-            font-weight: bold;
+            margin-left: 0.1rem;
+            &:first-child {
+              margin-left: 0;
+            }
+            > em {
+              color: #d91d36;
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              font-weight: bold;
+            }
           }
         }
-      }
-      > a {
-        display: block;
-        text-align: center;
-        font-size: 0.16rem;
-        line-height: 0.42rem;
-        background: #ccc;
-        border-radius: 0.06rem;
-        color: #fff;
-        margin-top: 0.1rem;
-        &.active {
-          background: #ff5200;
-        }
-      }
-    }
-    &.Layer {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      z-index: 10;
-      background: rgba(0, 0, 0, 0.7);
-      > div {
-        width: 80%;
-        background: #fff;
-        border-radius: 0.06rem;
-        position: relative;
-        overflow: hidden;
-        padding-top: 0.15rem;
-        > span {
-          font-size: 0.14rem;
-          font-weight: bold;
-          color: #000;
-          line-height: 0.3rem;
+        > a {
           display: block;
-          text-indent: 0.15rem;
+          text-align: center;
+          font-size: 0.16rem;
+          line-height: 0.42rem;
+          background: #ccc;
+          border-radius: 0.06rem;
+          color: #fff;
+          margin-top: 0.1rem;
+          &.active {
+            background: #ff5200;
+          }
         }
-        > ul {
-          padding: 0 0.15rem;
+      }
+      &.Layer {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 10;
+        background: rgba(0, 0, 0, 0.7);
+        > div {
+          width: 80%;
+          background: #fff;
+          border-radius: 0.06rem;
           position: relative;
           overflow: hidden;
-          &.ScrollList {
-            max-height: 2.5rem;
-            overflow-y: scroll;
-            -webkit-overflow-scrolling: touch;
+          padding-top: 0.15rem;
+          > span {
+            font-size: 0.14rem;
+            font-weight: bold;
+            color: #000;
+            line-height: 0.3rem;
+            display: block;
+            text-indent: 0.15rem;
           }
-          > li {
-            align-items: center;
-            border-top: 0.01rem solid #f7f7f7;
-            &:first-child {
-              border: none;
+          > ul {
+            padding: 0 0.15rem;
+            position: relative;
+            overflow: hidden;
+            &.ScrollList {
+              max-height: 2.5rem;
+              overflow-y: scroll;
+              -webkit-overflow-scrolling: touch;
             }
-            > div {
-              position: relative;
+            > li {
+              align-items: center;
+              border-top: 0.01rem solid #f7f7f7;
+              &:first-child {
+                border: none;
+              }
               > div {
-                width: 100%;
                 position: relative;
-                > span {
-                  display: block;
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  font-size: 0.14rem;
-                  color: #333;
-                  line-height: 0.42rem;
+                > div {
+                  width: 100%;
+                  position: relative;
+                  > span {
+                    display: block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-size: 0.14rem;
+                    color: #333;
+                    line-height: 0.42rem;
+                  }
+                }
+              }
+              > span {
+                font-size: 0.14rem;
+                color: #999;
+                margin-right: 0.1rem;
+              }
+              > i {
+                font-size: 0.2rem;
+                color: #999;
+                &.active {
+                  color: #ff5200;
                 }
               }
             }
-            > span {
-              font-size: 0.14rem;
-              color: #999;
-              margin-right: 0.1rem;
-            }
-            > i {
-              font-size: 0.2rem;
-              color: #999;
+          }
+          > .Bottom {
+            border-top: 0.01rem solid #f7f7f7;
+            > a {
+              font-size: 0.16rem;
+              line-height: 0.42rem;
+              text-align: center;
+              border-left: 0.01rem solid #f7f7f7;
               &.active {
                 color: #ff5200;
               }
-            }
-          }
-        }
-        > .Bottom {
-          border-top: 0.01rem solid #f7f7f7;
-          > a {
-            font-size: 0.16rem;
-            line-height: 0.42rem;
-            text-align: center;
-            border-left: 0.01rem solid #f7f7f7;
-            &.active {
-              color: #ff5200;
-            }
-            &:first-child {
-              border: none;
+              &:first-child {
+                border: none;
+              }
             }
           }
         }

src/pages/index/LanQiu/index.vue

@@ -1,119 +1,123 @@
 <template>
-  <div class="Page flex-v">
-
-    <div class="HideNav" :class="{'active': ShowSelectTypeNav}">
-      <div>
-        <span>{{SelectTypeData.GuoGuan.Name}}</span>
-        <nav>
-          <a v-for="(item, index) in SelectTypeData.GuoGuan.List" :key="index" :class="{'active': SelectType === item.Id}" @click="CutSelectType(item)">{{item.Name}}</a>
-        </nav>
-        <span>{{SelectTypeData.DanGuan.Name}}</span>
-        <nav>
-          <a v-for="(item, index) in SelectTypeData.DanGuan.List" :key="index" :class="{'active': SelectType === item.Id}" @click="CutSelectType(item)">{{item.Name}}</a>
-        </nav>
-      </div>
-    </div>
-
-    <div class="Top">
-      <div class="Time flex-h">
-        <div class="Icon">
-          <img src="../../../assets/img/icon6.png" class="centerLabel contain" alt="">
-        </div>
-        <div class="flex-item">
-          <div>
-            <span>{{MixData.length}}场比赛</span>
-          </div>
-        </div>
-        <div class="flex-item">
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainTitleIcon="true" :ShowMainHeaderBack="true" :MainHeaderTitle="MainTitle" :MainTitleClick="MainTitleClick">
+      <div class="PageContainer flex-v">
+        <div class="HideNav" :class="{'active': ShowSelectTypeNav}">
           <div>
+            <span>{{SelectTypeData.GuoGuan.Name}}</span>
+            <nav>
+              <a v-for="(item, index) in SelectTypeData.GuoGuan.List" :key="index" :class="{'active': SelectType === item.Id}" @click="CutSelectType(item)">{{item.Name}}</a>
+            </nav>
+            <span>{{SelectTypeData.DanGuan.Name}}</span>
+            <nav>
+              <a v-for="(item, index) in SelectTypeData.DanGuan.List" :key="index" :class="{'active': SelectType === item.Id}" @click="CutSelectType(item)">{{item.Name}}</a>
+            </nav>
           </div>
         </div>
-      </div>
-    </div>
-
-    <!-- 选区 -->
-    <div class="flex-item">
-      <div>
-        <div>
-          <div class="SelectArea">
-
-            <!-- 过关-混合投注 -->
-            <div class="GuoGuanHunHeTouZhu" v-if="SelectType === 1">
-              <LanQiuGuoGuanHunHeTouZhu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanHunHeTouZhu>
-            </div>
 
-            <!-- 过关-胜负 -->
-            <div class="GuoGuanShengFu" v-if="SelectType === 2">
-              <LanQiuGuoGuanShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanShengFu>
+        <div class="Top">
+          <div class="Time flex-h">
+            <div class="Icon">
+              <img src="../../../assets/img/icon6.png" class="centerLabel contain" alt="">
             </div>
-
-            <!-- 过关-让分胜负 -->
-            <div class="GuoGuanRangFenShengFu" v-if="SelectType === 3">
-              <LanQiuGuoGuanRangFenShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanRangFenShengFu>
-            </div>
-
-            <!-- 过关-胜分差 -->
-            <div class="GuoGuanShengFenCha" v-if="SelectType === 4">
-              <LanQiuGuoGuanShengFenCha v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanShengFenCha>
+            <div class="flex-item">
+              <div>
+                <span>{{MixData.length}}场比赛</span>
+              </div>
             </div>
-
-            <!-- 过关-大小分 -->
-            <div class="GuoGuanDaXiaoFen" v-if="SelectType === 5">
-              <LanQiuGuoGuanDaXiaoFen v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanDaXiaoFen>
-            </div>
-
-            <!-- 单关-胜负 -->
-            <div class="DanGuanShengFu" v-if="SelectType === 6">
-              <LanQiuDanGuanShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanShengFu>
-            </div>
-
-            <!-- 单关-让分胜负 -->
-            <div class="DanGuanRangFenShengFu" v-if="SelectType === 7">
-              <LanQiuDanGuanRangFenShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanRangFenShengFu>
-            </div>
-
-            <!-- 单关-胜分差 -->
-            <div class="DanGuanShengFenCha" v-if="SelectType === 8">
-              <LanQiuDanGuanShengFenCha v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanShengFenCha>
+            <div class="flex-item">
+              <div>
+              </div>
             </div>
+          </div>
+        </div>
 
-            <!-- 单关-大小分 -->
-            <div class="DanGuanDaXiaoFen" v-if="SelectType === 9">
-              <LanQiuDanGuanDaXiaoFen v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanDaXiaoFen>
+        <!-- 选区 -->
+        <div class="flex-item">
+          <div>
+            <div>
+              <div class="SelectArea">
+
+                <!-- 过关-混合投注 -->
+                <div class="GuoGuanHunHeTouZhu" v-if="SelectType === 1">
+                  <LanQiuGuoGuanHunHeTouZhu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanHunHeTouZhu>
+                </div>
+
+                <!-- 过关-胜负 -->
+                <div class="GuoGuanShengFu" v-if="SelectType === 2">
+                  <LanQiuGuoGuanShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanShengFu>
+                </div>
+
+                <!-- 过关-让分胜负 -->
+                <div class="GuoGuanRangFenShengFu" v-if="SelectType === 3">
+                  <LanQiuGuoGuanRangFenShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanRangFenShengFu>
+                </div>
+
+                <!-- 过关-胜分差 -->
+                <div class="GuoGuanShengFenCha" v-if="SelectType === 4">
+                  <LanQiuGuoGuanShengFenCha v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanShengFenCha>
+                </div>
+
+                <!-- 过关-大小分 -->
+                <div class="GuoGuanDaXiaoFen" v-if="SelectType === 5">
+                  <LanQiuGuoGuanDaXiaoFen v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanDaXiaoFen>
+                </div>
+
+                <!-- 单关-胜负 -->
+                <div class="DanGuanShengFu" v-if="SelectType === 6">
+                  <LanQiuDanGuanShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanShengFu>
+                </div>
+
+                <!-- 单关-让分胜负 -->
+                <div class="DanGuanRangFenShengFu" v-if="SelectType === 7">
+                  <LanQiuDanGuanRangFenShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanRangFenShengFu>
+                </div>
+
+                <!-- 单关-胜分差 -->
+                <div class="DanGuanShengFenCha" v-if="SelectType === 8">
+                  <LanQiuDanGuanShengFenCha v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanShengFenCha>
+                </div>
+
+                <!-- 单关-大小分 -->
+                <div class="DanGuanDaXiaoFen" v-if="SelectType === 9">
+                  <LanQiuDanGuanDaXiaoFen v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanDaXiaoFen>
+                </div>
+
+              </div>
             </div>
-
           </div>
         </div>
-      </div>
-    </div>
-
-    <!-- 投注栏 -->
-    <div class="Bottom flex-h">
-      <a class="iconfont iconjian" @click="EmptyAllData"></a>
-      <div class="flex-item"></div>
-      <span>{{ResList.length ? `已选择${ResList.length}场比赛` : SelectType > 5 ? '单关至少选一场比赛' : '非单关至少选两场比赛'}}</span>
-      <a class="Btn" @click="ToBetting">投注</a>
-    </div>
 
+        <!-- 投注栏 -->
+        <div class="Bottom flex-h">
+          <a class="iconfont iconjian" @click="EmptyAllData"></a>
+          <div class="flex-item"></div>
+          <span>{{ResList.length ? `已选择${ResList.length}场比赛` : SelectType > 5 ? '单关至少选一场比赛' : '非单关至少选两场比赛'}}</span>
+          <a class="Btn" @click="ToBetting">投注</a>
+        </div>
+      </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-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'
+import { createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+const LanQiuGuoGuanHunHeTouZhu = () => import('../../../components/index/LanQiuGuoGuanHunHeTouZhu')
+const LanQiuGuoGuanShengFu = () => import('../../../components/index/LanQiuGuoGuanShengFu')
+const LanQiuGuoGuanRangFenShengFu = () => import('../../../components/index/LanQiuGuoGuanRangFenShengFu')
+const LanQiuGuoGuanDaXiaoFen = () => import('../../../components/index/LanQiuGuoGuanDaXiaoFen')
+const LanQiuDanGuanShengFu = () => import('../../../components/index/LanQiuDanGuanShengFu')
+const LanQiuDanGuanRangFenShengFu = () => import('../../../components/index/LanQiuDanGuanRangFenShengFu')
+const LanQiuDanGuanDaXiaoFen = () => import('../../../components/index/LanQiuDanGuanDaXiaoFen')
+const LanQiuGuoGuanShengFenCha = () => import('../../../components/index/LanQiuGuoGuanShengFenCha')
+const LanQiuDanGuanShengFenCha = () => import('../../../components/index/LanQiuDanGuanShengFenCha')
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
     return {
+      MainTitle: '',
       SelectTypeData: {
         GuoGuan: {
           Name: '过关',
@@ -146,6 +150,7 @@ export default {
     })
   },
   components: {
+    MainPageContainer,
     LanQiuGuoGuanHunHeTouZhu,
     LanQiuGuoGuanShengFu,
     LanQiuGuoGuanRangFenShengFu,
@@ -157,13 +162,6 @@ export default {
     LanQiuDanGuanShengFenCha
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'MainTitleClick', value: this.MainTitleClick },
-      { name: 'ShowMainHeader', value: true },
-      { name: 'ShowMainTitleIcon', value: true },
-      { name: 'MainHeaderTitle', value: '混合投注（过关）' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -171,10 +169,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData', // 配置页面框架数据
-      'EditMainItemData' // 配置页面框架数据
-    ]),
     ...mapUserActions([
       'GetMixData'
     ]),
@@ -183,6 +177,7 @@ export default {
       'EmptyLanQiuCart'
     ]),
     Init () { // 初始化
+      this.MainTitle = '混合投注（过关）'
       this.GetMixData({ queryData: { lottery: 'basketball' } }).then((res) => {
         this.MixData = res.data.data || []
       })
@@ -223,7 +218,7 @@ export default {
     },
     CutSelectType (item) { // 切换选法
       this.SelectType = item.Id
-      this.EditMainItemData({ name: 'MainHeaderTitle', value: `${item.Name}（${this.SelectType > 5 ? '单关' : '过关'}）` })
+      this.MainTitle = `${item.Name}（${this.SelectType > 5 ? '单关' : '过关'}）`
       this.EmptyAllData() // 清除数据
       this.ShowSelectTypeNav = false
     },

src/pages/index/LanQiu/page.scss

@@ -1,156 +1,165 @@
 .Page {
   background: #f8f8f8;
+  width: 100%;
+  height: 100%;
   position: relative;
-  > .HideNav {
+  overflow: hidden;
+  .PageContainer {
     width: 100%;
-    position: absolute;
-    z-index: 3;
-    background: #fff;
-    left: 0;
-    top: 0;
-    bottom: 0.4rem;
-    display: none;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    &.active {
-      display: block;
-    }
-    > div {
-      padding: 0.1rem 0.15rem 0;
-      > span {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    > .HideNav {
+      width: 100%;
+      position: absolute;
+      z-index: 3;
+      background: #fff;
+      left: 0;
+      top: 0;
+      bottom: 0.4rem;
+      display: none;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      &.active {
         display: block;
-        font-size: 0.16rem;
-        line-height: 0.3rem;
-        margin-top: 0.1rem;
-        margin-bottom: 0.1rem;
       }
-      > nav {
-        font-size: 0;
-        > a {
-          display: inline-block;
-          font-size: 0.14rem;
+      > div {
+        padding: 0.1rem 0.15rem 0;
+        > span {
+          display: block;
+          font-size: 0.16rem;
           line-height: 0.3rem;
-          padding: 0 0.15rem;
-          border: 0.01rem solid #333;
-          border-radius: 0.3rem;
-          margin-right: 0.1rem;
+          margin-top: 0.1rem;
           margin-bottom: 0.1rem;
-          &.active {
-            border-color: #ff5200;
-            color: #fff;
-            background: #ff5200;
+        }
+        > nav {
+          font-size: 0;
+          > a {
+            display: inline-block;
+            font-size: 0.14rem;
+            line-height: 0.3rem;
+            padding: 0 0.15rem;
+            border: 0.01rem solid #333;
+            border-radius: 0.3rem;
+            margin-right: 0.1rem;
+            margin-bottom: 0.1rem;
+            &.active {
+              border-color: #ff5200;
+              color: #fff;
+              background: #ff5200;
+            }
           }
         }
       }
     }
-  }
-  > .Top {
-    background: #fff;
-    position: relative;
-    z-index: 2;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    > .Time {
-      align-items: center;
-      border-bottom: 0.01rem solid #f7f7f7;
-      > .Icon {
-        width: 0.16rem;
-        height: 0.16rem;
-        position: relative;
-        overflow: hidden;
-        margin-left: 0.15rem;
-        margin-right: 0.25rem;
-      }
-      > .flex-item {
-        position: relative;
-        > div {
-          width: 100%;
+    > .Top {
+      background: #fff;
+      position: relative;
+      z-index: 2;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      > .Time {
+        align-items: center;
+        border-bottom: 0.01rem solid #f7f7f7;
+        > .Icon {
+          width: 0.16rem;
+          height: 0.16rem;
           position: relative;
           overflow: hidden;
-          font-size: 0;
-          white-space: nowrap;
-          text-align: right;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.12rem;
-            color: #9a9a9a;
-            line-height: 0.28rem;
-            &.active {
-              color: #ff5200;
-            }
-            &:only-child {
-              margin-right: 0.15rem;
+          margin-left: 0.15rem;
+          margin-right: 0.25rem;
+        }
+        > .flex-item {
+          position: relative;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            font-size: 0;
+            white-space: nowrap;
+            text-align: right;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.12rem;
+              color: #9a9a9a;
+              line-height: 0.28rem;
+              &.active {
+                color: #ff5200;
+              }
+              &:only-child {
+                margin-right: 0.15rem;
+              }
             }
           }
         }
       }
     }
-  }
-  > .flex-item {
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
+    > .flex-item {
+      position: relative;
       overflow: hidden;
+      z-index: 1;
       > div {
         width: 100%;
-        height: 100%;
-        position: relative;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        background: #fff;
-        > .SelectArea {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        > div {
+          width: 100%;
+          height: 100%;
           position: relative;
-          overflow: hidden;
-          min-height: 100%;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          background: #fff;
+          > .SelectArea {
+            position: relative;
+            overflow: hidden;
+            min-height: 100%;
+          }
         }
       }
     }
-  }
-  > .Bottom {
-    background: #fff;
-    padding: 0.05rem 0.15rem;
-    align-items: center;
-    position: relative;
-    overflow: visible;
-    z-index: 2;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    > .SelectRes {
-      display: inline-block;
-      position: absolute;
-      right: 0.15rem;
-      top: -0.3rem;
-      font-size: 0.12rem;
-      line-height: 0.3rem;
-      > em {
-        color: #d91e36;
-        font-weight: bold;
-      }
-    }
-    > .iconfont {
-      font-size: 0.24rem;
-      color: #ff5200;
-      margin-right: 0.1rem;
-    }
-    > .flex-item {
+    > .Bottom {
+      background: #fff;
+      padding: 0.05rem 0.15rem;
+      align-items: center;
       position: relative;
-    }
-    > .Btn {
-      line-height: 0.28rem;
-      font-size: 0.13rem;
-      color: #ff5200;
-      border: 0.01rem solid #ff5200;
-      border-radius: 0.02rem;
-      margin-left: 0.15rem;
-      min-width: 0.7rem;
-      text-align: center;
-      &:last-child {
-        color: #fff;
-        background: #ff5200;
+      overflow: visible;
+      z-index: 2;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      > .SelectRes {
+        display: inline-block;
+        position: absolute;
+        right: 0.15rem;
+        top: -0.3rem;
+        font-size: 0.12rem;
+        line-height: 0.3rem;
+        > em {
+          color: #d91e36;
+          font-weight: bold;
+        }
+      }
+      > .iconfont {
+        font-size: 0.24rem;
+        color: #ff5200;
+        margin-right: 0.1rem;
+      }
+      > .flex-item {
+        position: relative;
+      }
+      > .Btn {
+        line-height: 0.28rem;
+        font-size: 0.13rem;
+        color: #ff5200;
+        border: 0.01rem solid #ff5200;
+        border-radius: 0.02rem;
+        margin-left: 0.15rem;
+        min-width: 0.7rem;
+        text-align: center;
+        &:last-child {
+          color: #fff;
+          background: #ff5200;
+        }
       }
     }
   }

src/pages/index/LanQiuDingDan/index.vue

@@ -1,117 +1,122 @@
 <template>
-  <div class="Page flex-v">
-    <div class="flex-item">
-      <div>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="篮球">
+      <div class="PageContainer flex-v">
+        <div class="flex-item">
+          <div>
+
+            <ul>
+              <li v-for="(item, index) in PageList" :key="index">
+                <a class="iconfont iconguanbi Close" @click="DeleteItem(index)"></a>
+                <div class="Title flex-h">
+                  <span>{{item.id}}</span>
+                  <div class="flex-item">
+                    <div>
+                      <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="List A">
+                  <span v-for="(subItem, subIndex) in item.list" :key="subIndex">{{subItem.name}}</span>
+                </div>
+              </li>
+            </ul>
 
-        <ul>
-          <li v-for="(item, index) in PageList" :key="index">
-            <a class="iconfont iconguanbi Close" @click="DeleteItem(index)"></a>
-            <div class="Title flex-h">
-              <span>{{item.id}}</span>
-              <div class="flex-item">
-                <div>
-                  <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+            <div class="OtherTab">
+              <div>
+                <div class="flex-h">
+                  <span class="flex-item">加倍</span>
+                  <span>
+                    <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1; TotalPrice = TotalCount * 2 * Multiple"></a>
+                    <input type="number" disabled="disabled" v-model="Multiple">
+                    <span>倍</span>
+                    <a class="iconfont iconjiahao" @click="Multiple += 1; TotalPrice = TotalCount * 2 * Multiple"></a>
+                  </span>
                 </div>
               </div>
             </div>
-            <div class="List A">
-              <span v-for="(subItem, subIndex) in item.list" :key="subIndex">{{subItem.name}}</span>
-            </div>
-          </li>
-        </ul>
 
-        <div class="OtherTab">
-          <div>
-            <div class="flex-h">
-              <span class="flex-item">加倍</span>
-              <span>
-                <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1; TotalPrice = TotalCount * 2 * Multiple"></a>
-                <input type="number" disabled="disabled" v-model="Multiple">
-                <span>倍</span>
-                <a class="iconfont iconjiahao" @click="Multiple += 1; TotalPrice = TotalCount * 2 * Multiple"></a>
-              </span>
-            </div>
           </div>
         </div>
 
-      </div>
-    </div>
-
-    <div class="Bottom">
-      <div class="Store">
-        <a @click="ShowStore = true">店铺：{{CurrentStoreName || '请选择'}}</a>
-      </div>
-      <div class="Chuan" v-if="$route.query.type === 'mix'">
-        <span @click="ShowPassWay = true">{{CurrentPassName || '请选择过关方式'}}</span>
-      </div>
-      <div class="Count">
-        <span>
-          <em>{{TotalCount}}</em>注
-        </span>
-        <span>金额：<em>{{TotalPrice}}</em>元</span>
-        <span>预计奖金：<em>{{(PriceArr[0] * Multiple).toFixed(2)}} ~ {{(PriceArr[1] * Multiple).toFixed(2)}}</em>元</span>
-      </div>
-      <a :class="{'active': CurrentStoreId !== null && LanQiuCart.length}" @click="ToPostBetting">立即购买</a>
-    </div>
-
-    <div class="Layer" v-if="ShowPassWay">
-      <div class="centerLabel">
-        <span>自由过关</span>
-        <nav>
-          <a v-for="(item, index) in FootballKeys.passes" :key="index" v-if="item.unitNum <= PageList.length && item.unitNum > 1 && item.amount === 1" :class="{'active': item.passCode === CurrentPassCode}" @click="CutPassCode(item)">{{item.name}}</a>
-        </nav>
-        <span>多串过关</span>
-        <nav>
-          <a v-for="(item, index) in FootballKeys.passes" :key="index" v-if="item.unitNum <= PageList.length && item.unitNum > 2 && item.amount !== 1" :class="{'active': item.passCode === CurrentPassCode}" @click="CutPassCode(item)">{{item.name}}</a>
-        </nav>
-        <div class="Bottom flex-h">
-          <a class="flex-item" @click="ShowPassWay = false">取消</a>
-          <a class="flex-item active" @click="ShowPassWay = false">确定</a>
+        <div class="Bottom">
+          <div class="Store">
+            <a @click="ShowStore = true">店铺：{{CurrentStoreName || '请选择'}}</a>
+          </div>
+          <div class="Chuan" v-if="$route.query.type === 'mix'">
+            <span @click="ShowPassWay = true">{{CurrentPassName || '请选择过关方式'}}</span>
+          </div>
+          <div class="Count">
+            <span>
+              <em>{{TotalCount}}</em>注
+            </span>
+            <span>金额：<em>{{TotalPrice}}</em>元</span>
+            <span>预计奖金：<em>{{(PriceArr[0] * Multiple).toFixed(2)}} ~ {{(PriceArr[1] * Multiple).toFixed(2)}}</em>元</span>
+          </div>
+          <a :class="{'active': CurrentStoreId !== null && LanQiuCart.length}" @click="ToPostBetting">立即购买</a>
         </div>
-      </div>
-    </div>
 
-    <div class="Layer" v-if="ShowStore">
-      <div class="centerLabel">
-        <span v-if="RecommendStoreList.length">推荐店铺：</span>
-        <ul v-if="RecommendStoreList.length">
-          <li v-for="(item, index) in RecommendStoreList" :key="index" class="flex-h" @click="SelectStore(item)">
-            <div class="flex-item">
-              <div>
-                <span>{{item.name}}</span>
-              </div>
+        <div class="Layer" v-if="ShowPassWay">
+          <div class="centerLabel">
+            <span>自由过关</span>
+            <nav>
+              <a v-for="(item, index) in FootballKeys.passes" :key="index" v-if="item.unitNum <= PageList.length && item.unitNum > 1 && item.amount === 1" :class="{'active': item.passCode === CurrentPassCode}" @click="CutPassCode(item)">{{item.name}}</a>
+            </nav>
+            <span>多串过关</span>
+            <nav>
+              <a v-for="(item, index) in FootballKeys.passes" :key="index" v-if="item.unitNum <= PageList.length && item.unitNum > 2 && item.amount !== 1" :class="{'active': item.passCode === CurrentPassCode}" @click="CutPassCode(item)">{{item.name}}</a>
+            </nav>
+            <div class="Bottom flex-h">
+              <a class="flex-item" @click="ShowPassWay = false">取消</a>
+              <a class="flex-item active" @click="ShowPassWay = false">确定</a>
             </div>
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <span>选择附近店铺：</span>
-        <ul class="ScrollList">
-          <li v-for="(item, index) in StoreList" :key="index" class="flex-h" @click="SelectStore(item)">
-            <div class="flex-item">
-              <div>
-                <span>{{item.name}}</span>
-              </div>
+          </div>
+        </div>
+
+        <div class="Layer" v-if="ShowStore">
+          <div class="centerLabel">
+            <span v-if="RecommendStoreList.length">推荐店铺：</span>
+            <ul v-if="RecommendStoreList.length">
+              <li v-for="(item, index) in RecommendStoreList" :key="index" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <span>选择附近店铺：</span>
+            <ul class="ScrollList">
+              <li v-for="(item, index) in StoreList" :key="index" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <!-- <span>200m</span> -->
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <div class="Bottom flex-h">
+              <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
+              <a class="flex-item active" @click="ShowStore = false">确定</a>
             </div>
-            <!-- <span>200m</span> -->
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <div class="Bottom flex-h">
-          <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
-          <a class="flex-item active" @click="ShowStore = false">确定</a>
+          </div>
         </div>
       </div>
-    </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
+import MainPageContainer from '../../../components/common/MainPageContainer'
 import { Switch } from 'vant'
 import GetAllParts from '../../../util/Sports'
 import GetPrice from '../../../util/Basketball'
-import { mapState, mapMutations, createNamespacedHelpers } from 'vuex'
+import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -146,14 +151,10 @@ export default {
     })
   },
   components: {
+    MainPageContainer,
     'van-switch': Switch
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '篮球' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -161,9 +162,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserMutations([
       'DeleteLanQiuCart',
       'EmptyLanQiuCart'

src/pages/index/LanQiuDingDan/page.scss

@@ -1,141 +1,149 @@
 .Page {
   background: #f8f8f8;
+  width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
-  > div {
-    &.flex-item {
-      position: relative;
-      overflow: hidden;
-      z-index: 1;
-      > div {
-        width: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        > ul {
-          padding: 0.15rem;
-          position: relative;
-          > li {
-            background: #fff;
-            position: relative;
-            overflow: visible;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    > div {
+      &.flex-item {
+        position: relative;
+        overflow: hidden;
+        z-index: 1;
+        > div {
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          > ul {
             padding: 0.15rem;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-            margin-top: 0.15rem;
-            border-radius: 0.06rem;
-            &:first-child {
-              margin-top: 0;
-            }
-            > .Close {
-              display: inline-block;
-              position: absolute;
-              right: 0;
-              top: 0;
-              font-size: 0.2rem;
-              color: #999;
-            }
-            > .Title {
-              align-items: center;
-              > span {
-                font-size: 0.12rem;
+            position: relative;
+            > li {
+              background: #fff;
+              position: relative;
+              overflow: visible;
+              padding: 0.15rem;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+              margin-top: 0.15rem;
+              border-radius: 0.06rem;
+              &:first-child {
+                margin-top: 0;
+              }
+              > .Close {
+                display: inline-block;
+                position: absolute;
+                right: 0;
+                top: 0;
+                font-size: 0.2rem;
                 color: #999;
-                line-height: 0.2rem;
               }
-              > div {
-                position: relative;
-                margin-left: 0.15rem;
+              > .Title {
+                align-items: center;
+                > span {
+                  font-size: 0.12rem;
+                  color: #999;
+                  line-height: 0.2rem;
+                }
                 > div {
-                  width: 100%;
                   position: relative;
-                  overflow: hidden;
-                  > span {
-                    display: block;
-                    white-space: nowrap;
-                    font-size: 0.12rem;
-                    line-height: 0.2rem;
+                  margin-left: 0.15rem;
+                  > div {
+                    width: 100%;
+                    position: relative;
                     overflow: hidden;
-                    text-overflow: ellipsis;
+                    > span {
+                      display: block;
+                      white-space: nowrap;
+                      font-size: 0.12rem;
+                      line-height: 0.2rem;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    }
                   }
                 }
               }
-            }
-            > .List {
-              font-size: 0;
-              > span {
-                display: inline-block;
-                vertical-align: middle;
-                font-size: 0.12rem;
-                line-height: 0.2rem;
-                margin-top: 0.05rem;
-                margin-right: 0.05rem;
-                color: #fff;
-                background: #ff5200;
-                padding: 0 0.1rem;
+              > .List {
+                font-size: 0;
+                > span {
+                  display: inline-block;
+                  vertical-align: middle;
+                  font-size: 0.12rem;
+                  line-height: 0.2rem;
+                  margin-top: 0.05rem;
+                  margin-right: 0.05rem;
+                  color: #fff;
+                  background: #ff5200;
+                  padding: 0 0.1rem;
+                }
               }
             }
           }
-        }
-        > .OtherTab {
-          padding: 0 0.15rem;
-          position: relative;
-          margin-bottom: 0.15rem;
-          > div {
-            background: #fff;
-            border-radius: 0.06rem;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+          > .OtherTab {
+            padding: 0 0.15rem;
+            position: relative;
+            margin-bottom: 0.15rem;
             > div {
-              padding: 0.15rem;
-              border-top: 0.01rem solid #f7f7f7;
-              align-items: center;
-              &:first-child {
-                border-top: none;
-              }
-              > span {
-                &:nth-child(1) {
-                  font-size: 0.15rem;
-                  color: #666;
-                  line-height: 0.2rem;
+              background: #fff;
+              border-radius: 0.06rem;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+              > div {
+                padding: 0.15rem;
+                border-top: 0.01rem solid #f7f7f7;
+                align-items: center;
+                &:first-child {
+                  border-top: none;
                 }
-                &:nth-child(2) {
-                  display: inline-block;
-                  margin-left: 0.1rem;
-                  position: relative;
-                  overflow: hidden;
-                  border: 0.01rem solid #f7f7f7;
-                  border-radius: 0.03rem;
-                  font-size: 0;
-                  white-space: nowrap;
-                  > * {
-                    display: inline-block;
-                    vertical-align: middle;
-                    font-size: 0.14rem;
-                    color: #999;
+                > span {
+                  &:nth-child(1) {
+                    font-size: 0.15rem;
+                    color: #666;
                     line-height: 0.2rem;
-                    border-left: 0.01rem solid #f7f7f7;
-                    &:first-child {
-                      border: none;
-                      border-right: 0.01rem solid #f7f7f7;
-                    }
-                  }
-                  > a {
-                    width: 0.2rem;
-                    text-align: center;
                   }
-                  > input {
-                    border: none;
-                    width: 0.35rem;
-                    text-align: center;
-                    color: #333;
-                    &:disabled {
+                  &:nth-child(2) {
+                    display: inline-block;
+                    margin-left: 0.1rem;
+                    position: relative;
+                    overflow: hidden;
+                    border: 0.01rem solid #f7f7f7;
+                    border-radius: 0.03rem;
+                    font-size: 0;
+                    white-space: nowrap;
+                    > * {
+                      display: inline-block;
+                      vertical-align: middle;
+                      font-size: 0.14rem;
+                      color: #999;
+                      line-height: 0.2rem;
+                      border-left: 0.01rem solid #f7f7f7;
+                      &:first-child {
+                        border: none;
+                        border-right: 0.01rem solid #f7f7f7;
+                      }
+                    }
+                    > a {
+                      width: 0.2rem;
+                      text-align: center;
+                    }
+                    > input {
+                      border: none;
+                      width: 0.35rem;
+                      text-align: center;
                       color: #333;
+                      &:disabled {
+                        color: #333;
+                      }
+                    }
+                    > span {
+                      border: none;
+                      margin-right: 0.03rem;
                     }
-                  }
-                  > span {
-                    border: none;
-                    margin-right: 0.03rem;
                   }
                 }
               }
@@ -143,178 +151,178 @@
           }
         }
       }
-    }
-    &.Bottom {
-      background: #fff;
-      position: relative;
-      overflow: hidden;
-      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-      z-index: 2;
-      padding: 0.15rem;
-      padding-bottom: 0.2rem;
-      > .Store {
-        font-size: 0;
-        text-align: center;
-        > a {
-          display: inline-block;
-          font-size: 0.14rem;
-          color: #333;
-          line-height: 0.2rem;
-          max-width: 100%;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-      }
-      > .Chuan {
-        margin: 0.1rem 0;
-        > span {
-          font-size: 0.14rem;
-          line-height: 0.2rem;
-          display: block;
-          white-space: nowrap;
-          overflow: hidden;
+      &.Bottom {
+        background: #fff;
+        position: relative;
+        overflow: hidden;
+        box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+        z-index: 2;
+        padding: 0.15rem;
+        padding-bottom: 0.2rem;
+        > .Store {
+          font-size: 0;
           text-align: center;
-          text-overflow: ellipsis;
-        }
-      }
-      > .Count {
-        font-size: 0;
-        text-align: center;
-        white-space: nowrap;
-        margin-top: 0.05rem;
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 0.12rem;
-          color: #333;
-          line-height: 0.2rem;
-          margin-left: 0.1rem;
-          &:first-child {
-            margin-left: 0;
-          }
-          > em {
-            color: #d91d36;
-            font-size: 0.12rem;
+          > a {
+            display: inline-block;
+            font-size: 0.14rem;
+            color: #333;
             line-height: 0.2rem;
-            font-weight: bold;
+            max-width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
           }
         }
-      }
-      > a {
-        display: block;
-        text-align: center;
-        font-size: 0.16rem;
-        line-height: 0.42rem;
-        background: #ccc;
-        border-radius: 0.06rem;
-        color: #fff;
-        margin-top: 0.1rem;
-        &.active {
-          background: #ff5200;
-        }
-      }
-    }
-    &.Layer {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      z-index: 10;
-      background: rgba(0, 0, 0, 0.7);
-      > div {
-        width: 80%;
-        background: #fff;
-        border-radius: 0.06rem;
-        position: relative;
-        overflow: hidden;
-        padding-top: 0.15rem;
-        > span {
-          font-size: 0.14rem;
-          font-weight: bold;
-          color: #000;
-          line-height: 0.3rem;
-          display: block;
-          text-indent: 0.15rem;
+        > .Chuan {
+          margin: 0.1rem 0;
+          > span {
+            font-size: 0.14rem;
+            line-height: 0.2rem;
+            display: block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-align: center;
+            text-overflow: ellipsis;
+          }
         }
-        > nav {
+        > .Count {
           font-size: 0;
-          padding: 0 0.15rem;
-          > a {
+          text-align: center;
+          white-space: nowrap;
+          margin-top: 0.05rem;
+          > span {
             display: inline-block;
+            vertical-align: middle;
             font-size: 0.12rem;
-            color: #666;
-            border: 0.01rem solid #666;
-            border-radius: 0.03rem;
+            color: #333;
             line-height: 0.2rem;
-            padding: 0 0.15rem;
-            margin-bottom: 0.1rem;
-            margin-right: 0.1rem;
-            &.active {
-              color: #fff;
-              background: #ff5200;
-              border-color: #ff5200;
+            margin-left: 0.1rem;
+            &:first-child {
+              margin-left: 0;
+            }
+            > em {
+              color: #d91d36;
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              font-weight: bold;
             }
           }
         }
-        > ul {
-          padding: 0 0.15rem;
+        > a {
+          display: block;
+          text-align: center;
+          font-size: 0.16rem;
+          line-height: 0.42rem;
+          background: #ccc;
+          border-radius: 0.06rem;
+          color: #fff;
+          margin-top: 0.1rem;
+          &.active {
+            background: #ff5200;
+          }
+        }
+      }
+      &.Layer {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 10;
+        background: rgba(0, 0, 0, 0.7);
+        > div {
+          width: 80%;
+          background: #fff;
+          border-radius: 0.06rem;
           position: relative;
           overflow: hidden;
-          &.ScrollList {
-            max-height: 2.5rem;
-            overflow-y: scroll;
-            -webkit-overflow-scrolling: touch;
+          padding-top: 0.15rem;
+          > span {
+            font-size: 0.14rem;
+            font-weight: bold;
+            color: #000;
+            line-height: 0.3rem;
+            display: block;
+            text-indent: 0.15rem;
           }
-          > li {
-            align-items: center;
-            border-top: 0.01rem solid #f7f7f7;
-            &:first-child {
-              border: none;
+          > nav {
+            font-size: 0;
+            padding: 0 0.15rem;
+            > a {
+              display: inline-block;
+              font-size: 0.12rem;
+              color: #666;
+              border: 0.01rem solid #666;
+              border-radius: 0.03rem;
+              line-height: 0.2rem;
+              padding: 0 0.15rem;
+              margin-bottom: 0.1rem;
+              margin-right: 0.1rem;
+              &.active {
+                color: #fff;
+                background: #ff5200;
+                border-color: #ff5200;
+              }
             }
-            > div {
-              position: relative;
+          }
+          > ul {
+            padding: 0 0.15rem;
+            position: relative;
+            overflow: hidden;
+            &.ScrollList {
+              max-height: 2.5rem;
+              overflow-y: scroll;
+              -webkit-overflow-scrolling: touch;
+            }
+            > li {
+              align-items: center;
+              border-top: 0.01rem solid #f7f7f7;
+              &:first-child {
+                border: none;
+              }
               > div {
-                width: 100%;
                 position: relative;
-                > span {
-                  display: block;
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  font-size: 0.14rem;
-                  color: #333;
-                  line-height: 0.42rem;
+                > div {
+                  width: 100%;
+                  position: relative;
+                  > span {
+                    display: block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-size: 0.14rem;
+                    color: #333;
+                    line-height: 0.42rem;
+                  }
+                }
+              }
+              > span {
+                font-size: 0.14rem;
+                color: #999;
+                margin-right: 0.1rem;
+              }
+              > i {
+                font-size: 0.2rem;
+                color: #999;
+                &.active {
+                  color: #ff5200;
                 }
               }
             }
-            > span {
-              font-size: 0.14rem;
-              color: #999;
-              margin-right: 0.1rem;
-            }
-            > i {
-              font-size: 0.2rem;
-              color: #999;
+          }
+          > .Bottom {
+            border-top: 0.01rem solid #f7f7f7;
+            > a {
+              font-size: 0.16rem;
+              line-height: 0.42rem;
+              text-align: center;
+              border-left: 0.01rem solid #f7f7f7;
               &.active {
                 color: #ff5200;
               }
-            }
-          }
-        }
-        > .Bottom {
-          border-top: 0.01rem solid #f7f7f7;
-          > a {
-            font-size: 0.16rem;
-            line-height: 0.42rem;
-            text-align: center;
-            border-left: 0.01rem solid #f7f7f7;
-            &.active {
-              color: #ff5200;
-            }
-            &:first-child {
-              border: none;
+              &:first-child {
+                border: none;
+              }
             }
           }
         }

src/pages/index/PaiLie3/index.vue

@@ -1,168 +1,153 @@
 <template>
-  <div class="Page flex-v">
-
-    <div class="HideNav" :class="{'active': ShowSelectTypeNav}">
-      <div class="flex-h">
-        <a class="flex-item" @click="CutSelectType(1)">直选</a>
-        <a class="flex-item" @click="CutSelectType(2)">组选3</a>
-        <a class="flex-item" @click="CutSelectType(3)">组选6</a>
-      </div>
-    </div>
-
-    <!-- <div class="Top">
-      <div class="Time flex-h">
-        <div class="Icon">
-          <img src="../../../assets/img/icon7.png" class="centerLabel contain" alt="">
-        </div>
-        <div class="flex-item">
-          <div>
-            <span>剩余时间：</span>
-            <span>20:20:20</span>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainTitleIcon="true" :ShowMainHeaderBack="true" :MainHeaderTitle="MainTitle" :MainTitleClick="MainTitleClick">
+      <div class="PageContainer flex-v">
+        <div class="HideNav" :class="{'active': ShowSelectTypeNav}">
+          <div class="flex-h">
+            <a class="flex-item" @click="CutSelectType(1)">直选</a>
+            <a class="flex-item" @click="CutSelectType(2)">组选3</a>
+            <a class="flex-item" @click="CutSelectType(3)">组选6</a>
           </div>
         </div>
+
+        <!-- 选区 -->
         <div class="flex-item">
           <div>
-            <span>20200815</span>
-          </div>
-        </div>
-      </div>
-    </div> -->
-
-    <!-- 选区 -->
-    <div class="flex-item">
-      <div>
-        <div>
-          <div class="SelectArea" :class="{'active': SelectType === 2}">
+            <div>
+              <div class="SelectArea" :class="{'active': SelectType === 2}">
 
-            <!-- 直选 -->
-            <div class="ZhiXuanArea" v-if="SelectType === 1">
-              <div>
-                <span>百位区（至少选择一个）</span>
-                <ul>
-                  <li v-for="(item, index) in ZhiXuanData.BaiWei" :key="index">
-                    <a :class="{'active': item.Active}" @click="ZhiXuanSelectItem(item)">{{item.Num}}</a>
-                    <!-- <span>{{item.MissNum}}</span> -->
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <span>十位区（至少选择一个）</span>
-                <ul>
-                  <li v-for="(item, index) in ZhiXuanData.ShiWei" :key="index">
-                    <a :class="{'active': item.Active}" @click="ZhiXuanSelectItem(item)">{{item.Num}}</a>
-                    <!-- <span>{{item.MissNum}}</span> -->
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <span>个位区（至少选择一个）</span>
-                <ul>
-                  <li v-for="(item, index) in ZhiXuanData.GeWei" :key="index">
-                    <a :class="{'active': item.Active}" @click="ZhiXuanSelectItem(item)">{{item.Num}}</a>
-                    <!-- <span>{{item.MissNum}}</span> -->
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <!-- 组选3 -->
-            <div class="ZuXuan3Area" v-if="SelectType === 2">
-              <div class="flex-v">
-                <nav class="flex-h">
-                  <a class="flex-item" :class="{'active': ZuXuan3Type === 1}" @click="CutZuXuan3(1)">单式</a>
-                  <a class="flex-item" :class="{'active': ZuXuan3Type === 2}" @click="CutZuXuan3(2)">复式</a>
-                </nav>
-                <div class="flex-item">
+                <!-- 直选 -->
+                <div class="ZhiXuanArea" v-if="SelectType === 1">
                   <div>
+                    <span>百位区（至少选择一个）</span>
+                    <ul>
+                      <li v-for="(item, index) in ZhiXuanData.BaiWei" :key="index">
+                        <a :class="{'active': item.Active}" @click="ZhiXuanSelectItem(item)">{{item.Num}}</a>
+                        <!-- <span>{{item.MissNum}}</span> -->
+                      </li>
+                    </ul>
+                  </div>
+                  <div>
+                    <span>十位区（至少选择一个）</span>
+                    <ul>
+                      <li v-for="(item, index) in ZhiXuanData.ShiWei" :key="index">
+                        <a :class="{'active': item.Active}" @click="ZhiXuanSelectItem(item)">{{item.Num}}</a>
+                        <!-- <span>{{item.MissNum}}</span> -->
+                      </li>
+                    </ul>
+                  </div>
+                  <div>
+                    <span>个位区（至少选择一个）</span>
+                    <ul>
+                      <li v-for="(item, index) in ZhiXuanData.GeWei" :key="index">
+                        <a :class="{'active': item.Active}" @click="ZhiXuanSelectItem(item)">{{item.Num}}</a>
+                        <!-- <span>{{item.MissNum}}</span> -->
+                      </li>
+                    </ul>
+                  </div>
+                </div>
 
-                    <!-- 单式 -->
-                    <div v-if="ZuXuan3Type === 1">
-                      <div>
-                        <span>出现两次的号码</span>
-                        <ul>
-                          <li v-for="(item, index) in ZuXuan3Data.DanShiTwice" :key="index">
-                            <a :class="{'active': item.Active}" @click="SelectZuXuan3DanShi(item, 2)">{{item.Num}}</a>
-                            <!-- <span>{{item.MissNum}}</span> -->
-                          </li>
-                        </ul>
-                      </div>
+                <!-- 组选3 -->
+                <div class="ZuXuan3Area" v-if="SelectType === 2">
+                  <div class="flex-v">
+                    <nav class="flex-h">
+                      <a class="flex-item" :class="{'active': ZuXuan3Type === 1}" @click="CutZuXuan3(1)">单式</a>
+                      <a class="flex-item" :class="{'active': ZuXuan3Type === 2}" @click="CutZuXuan3(2)">复式</a>
+                    </nav>
+                    <div class="flex-item">
                       <div>
-                        <span>出现一次的号码</span>
-                        <ul>
-                          <li v-for="(item, index) in ZuXuan3Data.DanShiOnce" :key="index">
-                            <a :class="{'active': item.Active}" @click="SelectZuXuan3DanShi(item, 1)">{{item.Num}}</a>
-                            <!-- <span>{{item.MissNum}}</span> -->
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
 
-                    <!-- 复式 -->
-                    <div v-if="ZuXuan3Type === 2">
-                      <div>
-                        <span>选择号码（至少选择2个）</span>
-                        <ul>
-                          <li v-for="(item, index) in ZuXuan3Data.FuShi" :key="index">
-                            <a :class="{'active': item.Active}" @click="SelectZuXuan3FuShi(item)">{{item.Num}}</a>
-                            <!-- <span>{{item.MissNum}}</span> -->
-                          </li>
-                        </ul>
+                        <!-- 单式 -->
+                        <div v-if="ZuXuan3Type === 1">
+                          <div>
+                            <span>出现两次的号码</span>
+                            <ul>
+                              <li v-for="(item, index) in ZuXuan3Data.DanShiTwice" :key="index">
+                                <a :class="{'active': item.Active}" @click="SelectZuXuan3DanShi(item, 2)">{{item.Num}}</a>
+                                <!-- <span>{{item.MissNum}}</span> -->
+                              </li>
+                            </ul>
+                          </div>
+                          <div>
+                            <span>出现一次的号码</span>
+                            <ul>
+                              <li v-for="(item, index) in ZuXuan3Data.DanShiOnce" :key="index">
+                                <a :class="{'active': item.Active}" @click="SelectZuXuan3DanShi(item, 1)">{{item.Num}}</a>
+                                <!-- <span>{{item.MissNum}}</span> -->
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+
+                        <!-- 复式 -->
+                        <div v-if="ZuXuan3Type === 2">
+                          <div>
+                            <span>选择号码（至少选择2个）</span>
+                            <ul>
+                              <li v-for="(item, index) in ZuXuan3Data.FuShi" :key="index">
+                                <a :class="{'active': item.Active}" @click="SelectZuXuan3FuShi(item)">{{item.Num}}</a>
+                                <!-- <span>{{item.MissNum}}</span> -->
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+
                       </div>
                     </div>
+                  </div>
+                </div>
 
+                <!-- 组选6 -->
+                <div class="ZuXuan6Area" v-if="SelectType === 3">
+                  <div class="Num">
+                    <span>选择号码（至少选择3个）</span>
+                    <ul>
+                      <li v-for="(item, index) in ZuXuan6Data" :key="index">
+                        <a :class="{'active': item.Active}" @click="ZuXuan6SelectItem(item)">{{item.Num}}</a>
+                        <!-- <span>{{item.MissNum}}</span> -->
+                      </li>
+                    </ul>
+                  </div>
+                  <div class="FastSelect">
+                    <span>快速选号</span>
+                    <ul>
+                      <li><a @click="ZuXuan6RandomSelect(8, 0)" :class="{'active': ZuXuan6RandomActiveIndex === 0}">10选8 赔率1.54</a></li>
+                      <li><a @click="ZuXuan6RandomSelect(7, 1)" :class="{'active': ZuXuan6RandomActiveIndex === 1}">10选7 赔率2.47</a></li>
+                      <li><a @click="ZuXuan6RandomSelect(6, 2)" :class="{'active': ZuXuan6RandomActiveIndex === 2}">10选6 赔率4.32</a></li>
+                      <li><a @click="ZuXuan6RandomSelect(5, 3)" :class="{'active': ZuXuan6RandomActiveIndex === 3}">10选5 赔率8.65</a></li>
+                    </ul>
                   </div>
                 </div>
-              </div>
-            </div>
 
-            <!-- 组选6 -->
-            <div class="ZuXuan6Area" v-if="SelectType === 3">
-              <div class="Num">
-                <span>选择号码（至少选择3个）</span>
-                <ul>
-                  <li v-for="(item, index) in ZuXuan6Data" :key="index">
-                    <a :class="{'active': item.Active}" @click="ZuXuan6SelectItem(item)">{{item.Num}}</a>
-                    <!-- <span>{{item.MissNum}}</span> -->
-                  </li>
-                </ul>
-              </div>
-              <div class="FastSelect">
-                <span>快速选号</span>
-                <ul>
-                  <li><a @click="ZuXuan6RandomSelect(8, 0)" :class="{'active': ZuXuan6RandomActiveIndex === 0}">10选8 赔率1.54</a></li>
-                  <li><a @click="ZuXuan6RandomSelect(7, 1)" :class="{'active': ZuXuan6RandomActiveIndex === 1}">10选7 赔率2.47</a></li>
-                  <li><a @click="ZuXuan6RandomSelect(6, 2)" :class="{'active': ZuXuan6RandomActiveIndex === 2}">10选6 赔率4.32</a></li>
-                  <li><a @click="ZuXuan6RandomSelect(5, 3)" :class="{'active': ZuXuan6RandomActiveIndex === 3}">10选5 赔率8.65</a></li>
-                </ul>
               </div>
             </div>
-
           </div>
         </div>
-      </div>
-    </div>
-
-    <!-- 投注栏 -->
-    <div class="Bottom flex-h">
-      <span class="SelectRes">共<em>{{TotalResNum}}</em>注<em>{{TotalResNum * 2}}</em>元，奖金<em>0</em>元</span>
-      <a class="iconfont iconjian" @click="EmptyData"></a>
-      <router-link :to="{ name: 'PaiLie3DingDan' }" class="iconfont icongouwuche"></router-link>
-      <!-- <a class="iconfont iconqushi"></a> -->
-      <div class="flex-item"></div>
-      <a class="Btn" :class="{'active': CanCreateRes}" @click="AddCart">添加号码蓝</a>
-      <a class="Btn" :class="{'active': CanCreateRes}" @click="CreateOrder">投注</a>
-    </div>
 
+        <!-- 投注栏 -->
+        <div class="Bottom flex-h">
+          <span class="SelectRes">共<em>{{TotalResNum}}</em>注<em>{{TotalResNum * 2}}</em>元，奖金<em>0</em>元</span>
+          <a class="iconfont iconjian" @click="EmptyData"></a>
+          <router-link :to="{ name: 'PaiLie3DingDan' }" class="iconfont icongouwuche"></router-link>
+          <!-- <a class="iconfont iconqushi"></a> -->
+          <div class="flex-item"></div>
+          <a class="Btn" :class="{'active': CanCreateRes}" @click="AddCart">添加号码蓝</a>
+          <a class="Btn" :class="{'active': CanCreateRes}" @click="CreateOrder">投注</a>
+        </div>
+      </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
   data () {
     return {
+      MainTitle: '',
       ZuXuan6RandomActiveIndex: null,
       DataLock: false, // 数据锁
       ResList: [],
@@ -187,15 +172,10 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'MainTitleClick', value: this.MainTitleClick },
-      { name: 'ShowMainHeader', value: true },
-      { name: 'ShowMainTitleIcon', value: true },
-      { name: 'MainHeaderTitle', value: `排列3-${this.SelectType === 1 ? '直选' : this.SelectType === 2 ? '组选3' : '组选6'}` },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
+    this.MainTitle = `排列3-${this.SelectType === 1 ? '直选' : this.SelectType === 2 ? '组选3' : '组选6'}`
     this.CreateData()
   },
   mounted () {
@@ -203,10 +183,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData', // 配置页面框架数据
-      'EditMainItemData' // 配置页面框架数据
-    ]),
     ...mapUserMutations([
       'AddPaiLie3Cart'
     ]),
@@ -462,7 +438,7 @@ export default {
     CutSelectType (num) { // 切换选法
       this.EmptyData()
       this.SelectType = num
-      this.EditMainItemData({ name: 'MainHeaderTitle', value: `排列3-${this.SelectType === 1 ? '直选' : this.SelectType === 2 ? '组选3' : '组选6'}` })
+      this.MainTitle = `排列3-${this.SelectType === 1 ? '直选' : this.SelectType === 2 ? '组选3' : '组选6'}`
       this.ShowSelectTypeNav = false
     },
     MainTitleClick () {

src/pages/index/PaiLie3/page.scss

@@ -1,256 +1,265 @@
 .Page {
   background: #f8f8f8;
+  width: 100%;
+  height: 100%;
   position: relative;
-  > .HideNav {
+  overflow: hidden;
+  .PageContainer {
     width: 100%;
-    position: absolute;
-    z-index: 3;
-    background: #fff;
-    left: 0;
-    top: 0;
-    display: none;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    &.active {
-      display: block;
-    }
-    > div {
-      align-items: center;
-      > a {
-        text-align: center;
-        font-size: 0.12rem;
-        line-height: 0.4rem;
-        border-left: 0.01rem solid #f7f7f7;
-        &:first-child {
-          border-left: none;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    > .HideNav {
+      width: 100%;
+      position: absolute;
+      z-index: 3;
+      background: #fff;
+      left: 0;
+      top: 0;
+      display: none;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      &.active {
+        display: block;
+      }
+      > div {
+        align-items: center;
+        > a {
+          text-align: center;
+          font-size: 0.12rem;
+          line-height: 0.4rem;
+          border-left: 0.01rem solid #f7f7f7;
+          &:first-child {
+            border-left: none;
+          }
         }
       }
     }
-  }
-  > .Top {
-    background: #fff;
-    position: relative;
-    z-index: 2;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    > .Time {
-      align-items: center;
-      border-bottom: 0.01rem solid #f7f7f7;
-      > .Icon {
-        width: 0.16rem;
-        height: 0.16rem;
-        position: relative;
-        overflow: hidden;
-        margin-left: 0.15rem;
-        margin-right: 0.65rem;
-      }
-      > .flex-item {
-        position: relative;
-        > div {
-          width: 100%;
+    > .Top {
+      background: #fff;
+      position: relative;
+      z-index: 2;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      > .Time {
+        align-items: center;
+        border-bottom: 0.01rem solid #f7f7f7;
+        > .Icon {
+          width: 0.16rem;
+          height: 0.16rem;
           position: relative;
           overflow: hidden;
-          font-size: 0;
-          white-space: nowrap;
-          text-align: right;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.12rem;
-            color: #9a9a9a;
-            line-height: 0.28rem;
-            &.active {
-              color: #ff5200;
-            }
-            &:only-child {
-              margin-right: 0.15rem;
+          margin-left: 0.15rem;
+          margin-right: 0.65rem;
+        }
+        > .flex-item {
+          position: relative;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            font-size: 0;
+            white-space: nowrap;
+            text-align: right;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.12rem;
+              color: #9a9a9a;
+              line-height: 0.28rem;
+              &.active {
+                color: #ff5200;
+              }
+              &:only-child {
+                margin-right: 0.15rem;
+              }
             }
           }
         }
       }
     }
-  }
-  > .flex-item {
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
+    > .flex-item {
+      position: relative;
       overflow: hidden;
+      z-index: 1;
       > div {
         width: 100%;
-        height: 100%;
-        position: relative;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        > .SelectArea {
-          padding: 0.15rem;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        > div {
+          width: 100%;
+          height: 100%;
           position: relative;
-          overflow: hidden;
-          &.active {
-            padding: 0;
-            height: 100%;
-            width: 100%;
-          }
-          > div {
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          > .SelectArea {
+            padding: 0.15rem;
             position: relative;
-            overflow: visible;
-            &.ZhiXuanArea {
-              > div {
-                background: #fff;
-                border-radius: 0.06rem;
-                position: relative;
-                overflow: hidden;
-                box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-                margin-top: 0.15rem;
-                &:first-child {
-                  margin-top: 0;
-                }
-                > span {
-                  display: block;
-                  font-size: 0.15rem;
-                  line-height: 0.4rem;
-                  text-indent: 0.15rem;
-                  border-bottom: 0.01rem solid #f7f7f7;
-                }
-                > ul {
-                  font-size: 0;
-                  padding-left: 0.1rem;
-                  padding-bottom: 0.1rem;
-                  > li {
-                    display: inline-block;
-                    vertical-align: middle;
-                    width: 0.28rem;
-                    position: relative;
-                    margin-right: 0.05rem;
-                    margin-top: 0.1rem;
-                    > a {
-                      width: 100%;
-                      font-size: 0.14rem;
-                      line-height: 0.28rem;
-                      border: 0.01rem solid #666;
-                      display: block;
-                      text-align: center;
-                      border-radius: 100%;
-                      &.active {
-                        background: #ff5200;
-                        color: #fff;
-                        border-color: #ff5200;
+            overflow: hidden;
+            &.active {
+              padding: 0;
+              height: 100%;
+              width: 100%;
+            }
+            > div {
+              position: relative;
+              overflow: visible;
+              &.ZhiXuanArea {
+                > div {
+                  background: #fff;
+                  border-radius: 0.06rem;
+                  position: relative;
+                  overflow: hidden;
+                  box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+                  margin-top: 0.15rem;
+                  &:first-child {
+                    margin-top: 0;
+                  }
+                  > span {
+                    display: block;
+                    font-size: 0.15rem;
+                    line-height: 0.4rem;
+                    text-indent: 0.15rem;
+                    border-bottom: 0.01rem solid #f7f7f7;
+                  }
+                  > ul {
+                    font-size: 0;
+                    padding-left: 0.1rem;
+                    padding-bottom: 0.1rem;
+                    > li {
+                      display: inline-block;
+                      vertical-align: middle;
+                      width: 0.28rem;
+                      position: relative;
+                      margin-right: 0.05rem;
+                      margin-top: 0.1rem;
+                      > a {
+                        width: 100%;
+                        font-size: 0.14rem;
+                        line-height: 0.28rem;
+                        border: 0.01rem solid #666;
+                        display: block;
+                        text-align: center;
+                        border-radius: 100%;
+                        &.active {
+                          background: #ff5200;
+                          color: #fff;
+                          border-color: #ff5200;
+                        }
+                      }
+                      > span {
+                        display: block;
+                        font-size: 0.14rem;
+                        text-align: center;
+                        line-height: 0.2rem;
+                        margin-top: 0.05rem;
                       }
-                    }
-                    > span {
-                      display: block;
-                      font-size: 0.14rem;
-                      text-align: center;
-                      line-height: 0.2rem;
-                      margin-top: 0.05rem;
                     }
                   }
                 }
               }
-            }
-            &.ZuXuan3Area {
-              position: relative;
-              overflow: hidden;
-              width: 100%;
-              height: 100%;
-              > div {
+              &.ZuXuan3Area {
                 position: relative;
                 overflow: hidden;
                 width: 100%;
                 height: 100%;
-                > nav {
-                  background: #fff;
+                > div {
                   position: relative;
-                  box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-                  > a {
-                    text-align: center;
-                    line-height: 0.4rem;
-                    border-left: 0.01rem solid #f7f7f7;
+                  overflow: hidden;
+                  width: 100%;
+                  height: 100%;
+                  > nav {
+                    background: #fff;
                     position: relative;
-                    &:first-child {
+                    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+                    > a {
+                      text-align: center;
+                      line-height: 0.4rem;
                       border-left: 0.01rem solid #f7f7f7;
-                    }
-                    &.active {
-                      color: #ff5200;
-                      &::after {
-                        content: "";
-                        width: 0.4rem;
-                        height: 0.02rem;
-                        display: block;
-                        background: #ff5200;
-                        position: absolute;
-                        left: 50%;
-                        bottom: 0;
-                        transform: translateX(-50%);
-                        -webkit-transform: translateX(-50%);
+                      position: relative;
+                      &:first-child {
+                        border-left: 0.01rem solid #f7f7f7;
+                      }
+                      &.active {
+                        color: #ff5200;
+                        &::after {
+                          content: "";
+                          width: 0.4rem;
+                          height: 0.02rem;
+                          display: block;
+                          background: #ff5200;
+                          position: absolute;
+                          left: 50%;
+                          bottom: 0;
+                          transform: translateX(-50%);
+                          -webkit-transform: translateX(-50%);
+                        }
                       }
                     }
                   }
-                }
-                > div {
-                  position: relative;
-                  overflow: hidden;
                   > div {
-                    width: 100%;
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    bottom: 0;
-                    overflow-y: scroll;
-                    -webkit-overflow-scrolling: touch;
+                    position: relative;
+                    overflow: hidden;
                     > div {
-                      padding: 0.15rem;
+                      width: 100%;
+                      position: absolute;
+                      left: 0;
+                      top: 0;
+                      bottom: 0;
+                      overflow-y: scroll;
+                      -webkit-overflow-scrolling: touch;
                       > div {
-                        background: #fff;
-                        border-radius: 0.06rem;
-                        position: relative;
-                        overflow: hidden;
-                        box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-                        margin-top: 0.15rem;
-                        &:first-child {
-                          margin-top: 0;
-                        }
-                        > span {
-                          display: block;
-                          font-size: 0.15rem;
-                          line-height: 0.4rem;
-                          text-indent: 0.15rem;
-                          border-bottom: 0.01rem solid #f7f7f7;
-                        }
-                        > ul {
-                          font-size: 0;
-                          padding-left: 0.1rem;
-                          padding-bottom: 0.1rem;
-                          > li {
-                            display: inline-block;
-                            vertical-align: middle;
-                            width: 0.28rem;
-                            position: relative;
-                            margin-right: 0.05rem;
-                            margin-top: 0.1rem;
-                            > a {
-                              width: 100%;
-                              font-size: 0.14rem;
-                              line-height: 0.28rem;
-                              border: 0.01rem solid #666;
-                              display: block;
-                              text-align: center;
-                              border-radius: 100%;
-                              &.active {
-                                background: #ff5200;
-                                color: #fff;
-                                border-color: #ff5200;
+                        padding: 0.15rem;
+                        > div {
+                          background: #fff;
+                          border-radius: 0.06rem;
+                          position: relative;
+                          overflow: hidden;
+                          box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+                          margin-top: 0.15rem;
+                          &:first-child {
+                            margin-top: 0;
+                          }
+                          > span {
+                            display: block;
+                            font-size: 0.15rem;
+                            line-height: 0.4rem;
+                            text-indent: 0.15rem;
+                            border-bottom: 0.01rem solid #f7f7f7;
+                          }
+                          > ul {
+                            font-size: 0;
+                            padding-left: 0.1rem;
+                            padding-bottom: 0.1rem;
+                            > li {
+                              display: inline-block;
+                              vertical-align: middle;
+                              width: 0.28rem;
+                              position: relative;
+                              margin-right: 0.05rem;
+                              margin-top: 0.1rem;
+                              > a {
+                                width: 100%;
+                                font-size: 0.14rem;
+                                line-height: 0.28rem;
+                                border: 0.01rem solid #666;
+                                display: block;
+                                text-align: center;
+                                border-radius: 100%;
+                                &.active {
+                                  background: #ff5200;
+                                  color: #fff;
+                                  border-color: #ff5200;
+                                }
+                              }
+                              > span {
+                                display: block;
+                                font-size: 0.14rem;
+                                text-align: center;
+                                line-height: 0.2rem;
+                                margin-top: 0.05rem;
                               }
-                            }
-                            > span {
-                              display: block;
-                              font-size: 0.14rem;
-                              text-align: center;
-                              line-height: 0.2rem;
-                              margin-top: 0.05rem;
                             }
                           }
                         }
@@ -259,96 +268,96 @@
                   }
                 }
               }
-            }
-            &.ZuXuan6Area {
-              > div.Num {
-                background: #fff;
-                border-radius: 0.06rem;
-                position: relative;
-                overflow: hidden;
-                box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-                margin-top: 0.15rem;
-                &:first-child {
-                  margin-top: 0;
-                }
-                > span {
-                  display: block;
-                  font-size: 0.15rem;
-                  line-height: 0.4rem;
-                  text-indent: 0.15rem;
-                  border-bottom: 0.01rem solid #f7f7f7;
-                }
-                > ul {
-                  font-size: 0;
-                  padding-left: 0.1rem;
-                  padding-bottom: 0.1rem;
-                  > li {
-                    display: inline-block;
-                    vertical-align: middle;
-                    width: 0.28rem;
-                    position: relative;
-                    margin-right: 0.05rem;
-                    margin-top: 0.1rem;
-                    > a {
-                      width: 100%;
-                      font-size: 0.14rem;
-                      line-height: 0.28rem;
-                      border: 0.01rem solid #666;
-                      display: block;
-                      text-align: center;
-                      border-radius: 100%;
-                      &.active {
-                        background: #ff5200;
-                        color: #fff;
-                        border-color: #ff5200;
+              &.ZuXuan6Area {
+                > div.Num {
+                  background: #fff;
+                  border-radius: 0.06rem;
+                  position: relative;
+                  overflow: hidden;
+                  box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+                  margin-top: 0.15rem;
+                  &:first-child {
+                    margin-top: 0;
+                  }
+                  > span {
+                    display: block;
+                    font-size: 0.15rem;
+                    line-height: 0.4rem;
+                    text-indent: 0.15rem;
+                    border-bottom: 0.01rem solid #f7f7f7;
+                  }
+                  > ul {
+                    font-size: 0;
+                    padding-left: 0.1rem;
+                    padding-bottom: 0.1rem;
+                    > li {
+                      display: inline-block;
+                      vertical-align: middle;
+                      width: 0.28rem;
+                      position: relative;
+                      margin-right: 0.05rem;
+                      margin-top: 0.1rem;
+                      > a {
+                        width: 100%;
+                        font-size: 0.14rem;
+                        line-height: 0.28rem;
+                        border: 0.01rem solid #666;
+                        display: block;
+                        text-align: center;
+                        border-radius: 100%;
+                        &.active {
+                          background: #ff5200;
+                          color: #fff;
+                          border-color: #ff5200;
+                        }
+                      }
+                      > span {
+                        display: block;
+                        font-size: 0.14rem;
+                        text-align: center;
+                        line-height: 0.2rem;
+                        margin-top: 0.05rem;
                       }
-                    }
-                    > span {
-                      display: block;
-                      font-size: 0.14rem;
-                      text-align: center;
-                      line-height: 0.2rem;
-                      margin-top: 0.05rem;
                     }
                   }
                 }
-              }
-              > .FastSelect {
-                background: #fff;
-                border-radius: 0.06rem;
-                position: relative;
-                overflow: hidden;
-                box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-                margin-top: 0.15rem;
-                > span {
-                  display: block;
-                  font-size: 0.15rem;
-                  line-height: 0.4rem;
-                  text-indent: 0.15rem;
-                  border-bottom: 0.01rem solid #f7f7f7;
-                }
-                > ul {
-                  font-size: 0;
-                  padding: 0.15rem 0;
-                  padding-top: 0;
-                  > li {
-                    display: inline-block;
-                    vertical-align: middle;
-                    width: 50%;
-                    position: relative;
-                    text-align: center;
-                    margin-top: 0.15rem;
-                    > a {
+                > .FastSelect {
+                  background: #fff;
+                  border-radius: 0.06rem;
+                  position: relative;
+                  overflow: hidden;
+                  box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+                  margin-top: 0.15rem;
+                  > span {
+                    display: block;
+                    font-size: 0.15rem;
+                    line-height: 0.4rem;
+                    text-indent: 0.15rem;
+                    border-bottom: 0.01rem solid #f7f7f7;
+                  }
+                  > ul {
+                    font-size: 0;
+                    padding: 0.15rem 0;
+                    padding-top: 0;
+                    > li {
                       display: inline-block;
-                      border: 0.01rem solid #f7f7f7;
-                      width: 1.5rem;
-                      border-radius: 0.03rem;
-                      line-height: 0.4rem;
+                      vertical-align: middle;
+                      width: 50%;
+                      position: relative;
                       text-align: center;
-                      &.active {
-                        background: #ff5200;
-                        border-color: #ff5200;
-                        color: #fff;
+                      margin-top: 0.15rem;
+                      > a {
+                        display: inline-block;
+                        border: 0.01rem solid #f7f7f7;
+                        width: 1.5rem;
+                        border-radius: 0.03rem;
+                        line-height: 0.4rem;
+                        text-align: center;
+                        &.active {
+                          background: #ff5200;
+                          border-color: #ff5200;
+                          color: #fff;
+                        }
                       }
                     }
                   }
@@ -359,54 +368,54 @@
         }
       }
     }
-  }
-  > .Bottom {
-    background: #fff;
-    padding: 0.05rem 0.15rem;
-    align-items: center;
-    position: relative;
-    overflow: visible;
-    z-index: 2;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    > .SelectRes {
-      display: inline-block;
-      position: absolute;
-      right: 0.15rem;
-      top: -0.3rem;
-      font-size: 0.12rem;
-      line-height: 0.3rem;
-      > em {
-        color: #d91e36;
-        font-weight: bold;
-      }
-    }
-    > .iconfont {
-      font-size: 0.24rem;
-      color: #ff5200;
-      margin-right: 0.1rem;
-    }
-    > .flex-item {
+    > .Bottom {
+      background: #fff;
+      padding: 0.05rem 0.15rem;
+      align-items: center;
       position: relative;
-    }
-    > .Btn {
-      line-height: 0.28rem;
-      font-size: 0.13rem;
-      color: #ccc;
-      border: 0.01rem solid #ccc;
-      border-radius: 0.02rem;
-      margin-left: 0.15rem;
-      min-width: 0.7rem;
-      text-align: center;
-      &:last-child {
-        color: #fff;
-        background: #ccc;
+      overflow: visible;
+      z-index: 2;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      > .SelectRes {
+        display: inline-block;
+        position: absolute;
+        right: 0.15rem;
+        top: -0.3rem;
+        font-size: 0.12rem;
+        line-height: 0.3rem;
+        > em {
+          color: #d91e36;
+          font-weight: bold;
+        }
       }
-      &.active {
+      > .iconfont {
+        font-size: 0.24rem;
         color: #ff5200;
-        border: 0.01rem solid #ff5200;
+        margin-right: 0.1rem;
+      }
+      > .flex-item {
+        position: relative;
+      }
+      > .Btn {
+        line-height: 0.28rem;
+        font-size: 0.13rem;
+        color: #ccc;
+        border: 0.01rem solid #ccc;
+        border-radius: 0.02rem;
+        margin-left: 0.15rem;
+        min-width: 0.7rem;
+        text-align: center;
         &:last-child {
           color: #fff;
-          background: #ff5200;
+          background: #ccc;
+        }
+        &.active {
+          color: #ff5200;
+          border: 0.01rem solid #ff5200;
+          &:last-child {
+            color: #fff;
+            background: #ff5200;
+          }
         }
       }
     }

src/pages/index/PaiLie3DingDan/index.vue

@@ -1,144 +1,147 @@
 <template>
-  <div class="Page flex-v">
-
-    <a class="Store flex-h" @click="ShowStore = true">
-      <div class="flex-item">
-        <div>
-          <span>投注门店：{{CurrentStoreName || '请选择'}}</span>
-        </div>
-      </div>
-      <span>查看更多</span>
-      <i class="iconfont iconjiantouright"></i>
-    </a>
-
-    <div class="flex-item">
-      <div>
-
-        <div class="Title">
-          <span>订单信息</span>
-        </div>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderRight="true" :ShowMainHeaderBack="true" MainHeaderRightIcon="iconqingkong" MainHeaderRightText="清空重选" MainHeaderTitle="确认投注" :MainHeaderRightClick="() => { this.EmptyCart() }">
+      <div class="PageContainer flex-v">
+        <a class="Store flex-h" @click="ShowStore = true">
+          <div class="flex-item">
+            <div>
+              <span>投注门店：{{CurrentStoreName || '请选择'}}</span>
+            </div>
+          </div>
+          <span>查看更多</span>
+          <i class="iconfont iconjiantouright"></i>
+        </a>
 
-        <span v-if="!PageList.length">购物车空空如也</span>
+        <div class="flex-item">
+          <div>
 
-        <ul>
-          <li v-for="(item, index) in PageList" :key="index">
-            <a class="iconfont iconguanbi Close" @click="DeleteItem(item, index)"></a>
             <div class="Title">
-              <span>{{ReturnType(item.Type)}}</span>
-              <span>{{item.Count}}注{{item.Count * 2}}元</span>
+              <span>订单信息</span>
             </div>
 
-            <!-- 直选 -->
-            <ul v-if="item.Type === 'ZhiXuan'">
-              <li v-for="(subItem, subIndex) in item.BaiWei" :key="`BaiWei-${subIndex}`">
-                <div class="centerLabel">
-                  <span>{{subItem}}</span>
-                  <span>百</span>
-                </div>
-              </li>
-              <li v-for="(subItem, subIndex) in item.ShiWei" :key="`ShiWei-${subIndex}`">
-                <div class="centerLabel">
-                  <span>{{subItem}}</span>
-                  <span>十</span>
-                </div>
-              </li>
-              <li v-for="(subItem, subIndex) in item.GeWei" :key="`GeWei-${subIndex}`">
-                <div class="centerLabel">
-                  <span>{{subItem}}</span>
-                  <span>个</span>
-                </div>
-              </li>
-            </ul>
+            <span v-if="!PageList.length">购物车空空如也</span>
 
-            <!-- 组选3 -->
-            <ul v-if="item.Type.indexOf('ZuXuan3') > -1">
-              <li v-for="(subItem, subIndex) in item.List" :key="subIndex">
-                <div class="centerLabel">
-                  <span>{{subItem}}</span>
+            <ul>
+              <li v-for="(item, index) in PageList" :key="index">
+                <a class="iconfont iconguanbi Close" @click="DeleteItem(item, index)"></a>
+                <div class="Title">
+                  <span>{{ReturnType(item.Type)}}</span>
+                  <span>{{item.Count}}注{{item.Count * 2}}元</span>
                 </div>
-              </li>
-            </ul>
 
-            <!-- 组选6 -->
-            <ul v-if="item.Type === 'ZuXuan6'">
-              <li v-for="(subItem, subIndex) in item.List" :key="subIndex">
-                <div class="centerLabel">
-                  <span>{{subItem}}</span>
-                </div>
-              </li>
-            </ul>
+                <!-- 直选 -->
+                <ul v-if="item.Type === 'ZhiXuan'">
+                  <li v-for="(subItem, subIndex) in item.BaiWei" :key="`BaiWei-${subIndex}`">
+                    <div class="centerLabel">
+                      <span>{{subItem}}</span>
+                      <span>百</span>
+                    </div>
+                  </li>
+                  <li v-for="(subItem, subIndex) in item.ShiWei" :key="`ShiWei-${subIndex}`">
+                    <div class="centerLabel">
+                      <span>{{subItem}}</span>
+                      <span>十</span>
+                    </div>
+                  </li>
+                  <li v-for="(subItem, subIndex) in item.GeWei" :key="`GeWei-${subIndex}`">
+                    <div class="centerLabel">
+                      <span>{{subItem}}</span>
+                      <span>个</span>
+                    </div>
+                  </li>
+                </ul>
 
-          </li>
-        </ul>
+                <!-- 组选3 -->
+                <ul v-if="item.Type.indexOf('ZuXuan3') > -1">
+                  <li v-for="(subItem, subIndex) in item.List" :key="subIndex">
+                    <div class="centerLabel">
+                      <span>{{subItem}}</span>
+                    </div>
+                  </li>
+                </ul>
 
-        <div class="Tips">
-          <span>排列五官方出票时间：</span>
-          <span>周一至周五 9:00 ~ 24:00 周六周日 9:00 ~ 次日1:00</span>
-        </div>
+                <!-- 组选6 -->
+                <ul v-if="item.Type === 'ZuXuan6'">
+                  <li v-for="(subItem, subIndex) in item.List" :key="subIndex">
+                    <div class="centerLabel">
+                      <span>{{subItem}}</span>
+                    </div>
+                  </li>
+                </ul>
 
-      </div>
-    </div>
+              </li>
+            </ul>
+
+            <div class="Tips">
+              <span>排列五官方出票时间：</span>
+              <span>周一至周五 9:00 ~ 24:00 周六周日 9:00 ~ 次日1:00</span>
+            </div>
 
-    <div class="Bottom">
-      <div class="flex-h">
-        <div class="flex-item">
-          <div>
-            <span><em>{{TotalCount}}</em>注<em>{{TotalCount * 2 * Multiple}}</em>元</span>
           </div>
         </div>
-        <span>
-          <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1"></a>
-          <input type="number" disabled="disabled" v-model="Multiple">
-          <span>倍</span>
-          <a class="iconfont iconjiahao" @click="Multiple += 1"></a>
-        </span>
-      </div>
-      <div class="flex-h">
-        <a @click="$router.go(-1)">自选号码</a>
-        <a @click="CutRandomCount(1)">机选一注</a>
-        <a class="flex-item" @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && PaiLie3Cart.length}">确认投注</a>
-      </div>
-    </div>
 
-    <div class="Layer" v-if="ShowStore">
-      <div class="centerLabel">
-        <span v-if="RecommendStoreList.length">推荐店铺：</span>
-        <ul v-if="RecommendStoreList.length">
-          <li v-for="(item, index) in RecommendStoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+        <div class="Bottom">
+          <div class="flex-h">
             <div class="flex-item">
               <div>
-                <span>{{item.name}}</span>
+                <span><em>{{TotalCount}}</em>注<em>{{TotalCount * 2 * Multiple}}</em>元</span>
               </div>
             </div>
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <span>选择附近店铺：</span>
-        <ul class="ScrollList">
-          <li v-for="(item, index) in StoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
-            <div class="flex-item">
-              <div>
-                <span>{{item.name}}</span>
-              </div>
+            <span>
+              <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1"></a>
+              <input type="number" disabled="disabled" v-model="Multiple">
+              <span>倍</span>
+              <a class="iconfont iconjiahao" @click="Multiple += 1"></a>
+            </span>
+          </div>
+          <div class="flex-h">
+            <a @click="$router.go(-1)">自选号码</a>
+            <a @click="CutRandomCount(1)">机选一注</a>
+            <a class="flex-item" @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && PaiLie3Cart.length}">确认投注</a>
+          </div>
+        </div>
+
+        <div class="Layer" v-if="ShowStore">
+          <div class="centerLabel">
+            <span v-if="RecommendStoreList.length">推荐店铺：</span>
+            <ul v-if="RecommendStoreList.length">
+              <li v-for="(item, index) in RecommendStoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <span>选择附近店铺：</span>
+            <ul class="ScrollList">
+              <li v-for="(item, index) in StoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <!-- <span>200m</span> -->
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <div class="Bottom flex-h">
+              <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
+              <a class="flex-item active" @click="ShowStore = false">确定</a>
             </div>
-            <!-- <span>200m</span> -->
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <div class="Bottom flex-h">
-          <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
-          <a class="flex-item active" @click="ShowStore = false">确定</a>
+          </div>
         </div>
       </div>
-    </div>
-
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -161,17 +164,9 @@ export default {
     })
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'MainHeaderRightClick', value: () => { this.EmptyCart() } },
-      { name: 'ShowMainHeaderRight', value: true },
-      { name: 'MainHeaderRightIcon', value: 'iconqingkong' },
-      { name: 'MainHeaderRightText', value: '清空重选' },
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '确认投注' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -179,9 +174,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserMutations([
       'AddPaiLie3Cart',
       'DeletePaiLie3Cart',

src/pages/index/PaiLie3DingDan/page.scss

@@ -1,346 +1,355 @@
 .Page {
   background: #f8f8f8;
+  width: 100%;
+  height: 100%;
   position: relative;
-  > .Store {
-    background: #fff;
-    padding: 0.15rem;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
     position: relative;
     overflow: hidden;
-    align-items: center;
-    z-index: 2;
-    > div {
+    > .Store {
+      background: #fff;
+      padding: 0.15rem;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
       position: relative;
+      overflow: hidden;
+      align-items: center;
+      z-index: 2;
       > div {
-        width: 100%;
         position: relative;
-        overflow: hidden;
-        > span {
-          display: block;
-          font-size: 0.15rem;
-          font-weight: bold;
-          color: #333;
-          line-height: 0.2rem;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-    > span {
-      font-size: 0.12rem;
-      color: #999;
-      margin-left: 0.1rem;
-    }
-    > i {
-      font-size: 0.12rem;
-      color: #999;
-    }
-  }
-  > div.flex-item {
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      overflow-y: scroll;
-      -webkit-overflow-scrolling: touch;
-      > .Title {
-        position: relative;
-        overflow: hidden;
-        text-align: center;
-        margin-top: 0.15rem;
-        &::after {
-          content: "";
-          display: block;
-          width: 70%;
-          height: 0.01rem;
-          background: #eee;
-          z-index: 1;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-          -webkit-transform: translate(-50%, -50%);
-        }
-        > span {
-          display: inline-block;
+        > div {
+          width: 100%;
           position: relative;
-          z-index: 2;
-          background: #f8f8f8;
-          font-size: 0.15rem;
-          font-weight: bold;
-          line-height: 0.2rem;
-          padding: 0 0.1rem;
+          overflow: hidden;
+          > span {
+            display: block;
+            font-size: 0.15rem;
+            font-weight: bold;
+            color: #333;
+            line-height: 0.2rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
         }
       }
       > span {
         font-size: 0.12rem;
         color: #999;
-        display: block;
-        line-height: 0.2rem;
-        text-align: center;
-        margin-top: 0.2rem;
+        margin-left: 0.1rem;
       }
-      > ul {
-        padding: 0.15rem;
-        > li {
-          background: #fff;
-          padding: 0.15rem;
-          box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+      > i {
+        font-size: 0.12rem;
+        color: #999;
+      }
+    }
+    > div.flex-item {
+      position: relative;
+      overflow: hidden;
+      z-index: 1;
+      > div {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;
+        > .Title {
           position: relative;
           overflow: hidden;
-          border-radius: 0.06rem;
+          text-align: center;
           margin-top: 0.15rem;
-          &:first-child {
-            margin-top: 0;
+          &::after {
+            content: "";
+            display: block;
+            width: 70%;
+            height: 0.01rem;
+            background: #eee;
+            z-index: 1;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            -webkit-transform: translate(-50%, -50%);
           }
-          > a.Close {
+          > span {
             display: inline-block;
-            position: absolute;
-            right: 0;
-            top: 0;
+            position: relative;
             z-index: 2;
-            font-size: 0.16rem;
-            color: #999;
+            background: #f8f8f8;
+            font-size: 0.15rem;
+            font-weight: bold;
+            line-height: 0.2rem;
+            padding: 0 0.1rem;
           }
-          > .Title {
-            font-size: 0;
-            white-space: nowrap;
-            > span {
+        }
+        > span {
+          font-size: 0.12rem;
+          color: #999;
+          display: block;
+          line-height: 0.2rem;
+          text-align: center;
+          margin-top: 0.2rem;
+        }
+        > ul {
+          padding: 0.15rem;
+          > li {
+            background: #fff;
+            padding: 0.15rem;
+            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+            position: relative;
+            overflow: hidden;
+            border-radius: 0.06rem;
+            margin-top: 0.15rem;
+            &:first-child {
+              margin-top: 0;
+            }
+            > a.Close {
               display: inline-block;
-              vertical-align: middle;
-              font-size: 0.12rem;
-              color: #333;
-              line-height: 0.2rem;
-              margin-left: 0.1rem;
-              &:first-child {
-                margin-left: 0;
+              position: absolute;
+              right: 0;
+              top: 0;
+              z-index: 2;
+              font-size: 0.16rem;
+              color: #999;
+            }
+            > .Title {
+              font-size: 0;
+              white-space: nowrap;
+              > span {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.12rem;
+                color: #333;
+                line-height: 0.2rem;
+                margin-left: 0.1rem;
+                &:first-child {
+                  margin-left: 0;
+                }
               }
             }
-          }
-          > ul {
-            font-size: 0;
-            > li {
-              display: inline-block;
-              vertical-align: middle;
-              width: 0.3rem;
-              height: 0.3rem;
-              position: relative;
-              overflow: hidden;
-              border-radius: 100%;
-              background: #ff5200;
-              margin-top: 0.1rem;
-              margin-right: 0.05rem;
-              > div {
-                width: 100%;
-                > span {
-                  font-size: 0.12rem;
-                  color: #fff;
-                  line-height: 0.14rem;
-                  display: block;
-                  text-align: center;
+            > ul {
+              font-size: 0;
+              > li {
+                display: inline-block;
+                vertical-align: middle;
+                width: 0.3rem;
+                height: 0.3rem;
+                position: relative;
+                overflow: hidden;
+                border-radius: 100%;
+                background: #ff5200;
+                margin-top: 0.1rem;
+                margin-right: 0.05rem;
+                > div {
+                  width: 100%;
+                  > span {
+                    font-size: 0.12rem;
+                    color: #fff;
+                    line-height: 0.14rem;
+                    display: block;
+                    text-align: center;
+                  }
                 }
               }
             }
           }
         }
-      }
-      > div.Tips {
-        padding: 0.15rem 0;
-        > span {
-          display: block;
-          font-size: 0.1rem;
-          color: #666;
-          line-height: 0.2rem;
-          text-align: center;
+        > div.Tips {
+          padding: 0.15rem 0;
+          > span {
+            display: block;
+            font-size: 0.1rem;
+            color: #666;
+            line-height: 0.2rem;
+            text-align: center;
+          }
         }
       }
     }
-  }
-  > div.Bottom {
-    background: #fff;
-    padding: 0.15rem;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-    position: relative;
-    overflow: hidden;
-    z-index: 2;
-    > div {
-      &:nth-child(1) {
-        align-items: center;
-        > div {
-          position: relative;
+    > div.Bottom {
+      background: #fff;
+      padding: 0.15rem;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+      position: relative;
+      overflow: hidden;
+      z-index: 2;
+      > div {
+        &:nth-child(1) {
+          align-items: center;
           > div {
-            width: 100%;
             position: relative;
-            overflow: hidden;
-            > span {
-              display: block;
-              font-size: 0.13rem;
-              color: #333;
-              font-weight: bold;
-              line-height: 0.2rem;
-              > em {
+            > div {
+              width: 100%;
+              position: relative;
+              overflow: hidden;
+              > span {
+                display: block;
                 font-size: 0.13rem;
-                color: #d91d36;
+                color: #333;
                 font-weight: bold;
                 line-height: 0.2rem;
+                > em {
+                  font-size: 0.13rem;
+                  color: #d91d36;
+                  font-weight: bold;
+                  line-height: 0.2rem;
+                }
               }
             }
           }
-        }
-        > span {
-          display: inline-block;
-          margin-left: 0.1rem;
-          position: relative;
-          overflow: hidden;
-          border: 0.01rem solid #f7f7f7;
-          border-radius: 0.03rem;
-          font-size: 0;
-          white-space: nowrap;
-          > * {
+          > span {
             display: inline-block;
-            vertical-align: middle;
-            font-size: 0.14rem;
-            color: #999;
-            line-height: 0.24rem;
-            border-left: 0.01rem solid #f7f7f7;
-            &:first-child {
+            margin-left: 0.1rem;
+            position: relative;
+            overflow: hidden;
+            border: 0.01rem solid #f7f7f7;
+            border-radius: 0.03rem;
+            font-size: 0;
+            white-space: nowrap;
+            > * {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.14rem;
+              color: #999;
+              line-height: 0.24rem;
+              border-left: 0.01rem solid #f7f7f7;
+              &:first-child {
+                border: none;
+                border-right: 0.01rem solid #f7f7f7;
+              }
+            }
+            > a {
+              width: 0.24rem;
+              text-align: center;
+            }
+            > input {
               border: none;
-              border-right: 0.01rem solid #f7f7f7;
+              width: 0.35rem;
+              text-align: center;
+              color: #333;
+              &:disabled {
+                color: #333;
+              }
+            }
+            > span {
+              border: none;
+              margin-right: 0.03rem;
             }
           }
+        }
+        &:nth-child(2) {
+          align-items: center;
+          margin-top: 0.15rem;
           > a {
-            width: 0.24rem;
-            text-align: center;
-          }
-          > input {
-            border: none;
-            width: 0.35rem;
+            font-size: 0.15rem;
+            line-height: 0.4rem;
+            border: 0.01rem solid #ff5200;
+            color: #ff5200;
+            border-radius: 0.02rem;
+            margin-left: 0.15rem;
+            padding: 0 0.1rem;
             text-align: center;
-            color: #333;
-            &:disabled {
-              color: #333;
+            &:first-child {
+              margin-left: 0;
             }
-          }
-          > span {
-            border: none;
-            margin-right: 0.03rem;
-          }
-        }
-      }
-      &:nth-child(2) {
-        align-items: center;
-        margin-top: 0.15rem;
-        > a {
-          font-size: 0.15rem;
-          line-height: 0.4rem;
-          border: 0.01rem solid #ff5200;
-          color: #ff5200;
-          border-radius: 0.02rem;
-          margin-left: 0.15rem;
-          padding: 0 0.1rem;
-          text-align: center;
-          &:first-child {
-            margin-left: 0;
-          }
-          &.flex-item {
-            color: #fff;
-            background: #ccc;
-            border-color: #ccc;
-            &.active {
-              background: #ff5200;
-              border-color: #ff5200;
+            &.flex-item {
+              color: #fff;
+              background: #ccc;
+              border-color: #ccc;
+              &.active {
+                background: #ff5200;
+                border-color: #ff5200;
+              }
             }
           }
         }
       }
     }
-  }
-  > div.Layer {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 10;
-    background: rgba(0, 0, 0, 0.7);
-    > div {
-      width: 80%;
-      background: #fff;
-      border-radius: 0.06rem;
-      position: relative;
-      overflow: hidden;
-      padding-top: 0.15rem;
-      > span {
-        font-size: 0.14rem;
-        font-weight: bold;
-        color: #000;
-        line-height: 0.3rem;
-        display: block;
-        text-indent: 0.15rem;
-      }
-      > ul {
-        padding: 0 0.15rem;
+    > div.Layer {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      z-index: 10;
+      background: rgba(0, 0, 0, 0.7);
+      > div {
+        width: 80%;
+        background: #fff;
+        border-radius: 0.06rem;
         position: relative;
         overflow: hidden;
-        &.ScrollList {
-          max-height: 2.5rem;
-          overflow-y: scroll;
-          -webkit-overflow-scrolling: touch;
+        padding-top: 0.15rem;
+        > span {
+          font-size: 0.14rem;
+          font-weight: bold;
+          color: #000;
+          line-height: 0.3rem;
+          display: block;
+          text-indent: 0.15rem;
         }
-        > li {
-          align-items: center;
-          border-top: 0.01rem solid #f7f7f7;
-          &:first-child {
-            border: none;
+        > ul {
+          padding: 0 0.15rem;
+          position: relative;
+          overflow: hidden;
+          &.ScrollList {
+            max-height: 2.5rem;
+            overflow-y: scroll;
+            -webkit-overflow-scrolling: touch;
           }
-          > div {
-            position: relative;
+          > li {
+            align-items: center;
+            border-top: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border: none;
+            }
             > div {
-              width: 100%;
               position: relative;
-              > span {
-                display: block;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                font-size: 0.14rem;
-                color: #333;
-                line-height: 0.42rem;
+              > div {
+                width: 100%;
+                position: relative;
+                > span {
+                  display: block;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  font-size: 0.14rem;
+                  color: #333;
+                  line-height: 0.42rem;
+                }
+              }
+            }
+            > span {
+              font-size: 0.14rem;
+              color: #999;
+              margin-right: 0.1rem;
+            }
+            > i {
+              font-size: 0.2rem;
+              color: #999;
+              &.active {
+                color: #ff5200;
               }
             }
           }
-          > span {
-            font-size: 0.14rem;
-            color: #999;
-            margin-right: 0.1rem;
-          }
-          > i {
-            font-size: 0.2rem;
-            color: #999;
+        }
+        > .Bottom {
+          border-top: 0.01rem solid #f7f7f7;
+          > a {
+            font-size: 0.16rem;
+            line-height: 0.42rem;
+            text-align: center;
+            border-left: 0.01rem solid #f7f7f7;
             &.active {
               color: #ff5200;
             }
-          }
-        }
-      }
-      > .Bottom {
-        border-top: 0.01rem solid #f7f7f7;
-        > a {
-          font-size: 0.16rem;
-          line-height: 0.42rem;
-          text-align: center;
-          border-left: 0.01rem solid #f7f7f7;
-          &.active {
-            color: #ff5200;
-          }
-          &:first-child {
-            border: none;
+            &:first-child {
+              border: none;
+            }
           }
         }
       }

src/pages/index/PaiLie5/index.vue

@@ -1,126 +1,110 @@
 <template>
-  <div class="Page flex-v">
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="排列5">
+      <div class="PageContainer flex-v">
+        <nav class="flex-h">
+          <a class="flex-item" :class="{'active': SelectType === 1}" @click="CutSelectType(1)">自选</a>
+          <a class="flex-item" :class="{'active': SelectType === 2}" @click="CutSelectType(2)">机选</a>
+        </nav>
 
-    <!-- <div class="Top">
-      <div class="Time flex-h">
-        <div class="Icon">
-          <img src="../../../assets/img/icon2.png" class="centerLabel contain" alt="">
-        </div>
-        <div class="flex-item">
-          <div>
-            <span>剩余时间：</span>
-            <span>20:20:20</span>
-          </div>
-        </div>
+        <!-- 选区 -->
         <div class="flex-item">
           <div>
-            <span>20200815</span>
-          </div>
-        </div>
-      </div>
-    </div> -->
+            <div>
+              <div class="SelectArea">
 
-    <nav class="flex-h">
-      <a class="flex-item" :class="{'active': SelectType === 1}" @click="CutSelectType(1)">自选</a>
-      <a class="flex-item" :class="{'active': SelectType === 2}" @click="CutSelectType(2)">机选</a>
-    </nav>
+                <!-- 自选 -->
+                <div class="ZiXuanArea" v-if="SelectType === 1">
+                  <div>
+                    <span>万位区（至少选择一个）</span>
+                    <ul>
+                      <li v-for="(item, index) in NumData.WanWei" :key="index">
+                        <a :class="{'active': item.Active}" @click="SelectItem(item, 'WanWei')">{{item.Num}}</a>
+                        <!-- <span>{{item.MissNum}}</span> -->
+                      </li>
+                    </ul>
+                  </div>
+                  <div>
+                    <span>千位区（至少选择一个）</span>
+                    <ul>
+                      <li v-for="(item, index) in NumData.QianWei" :key="index">
+                        <a :class="{'active': item.Active}" @click="SelectItem(item, 'QianWei')">{{item.Num}}</a>
+                        <!-- <span>{{item.MissNum}}</span> -->
+                      </li>
+                    </ul>
+                  </div>
+                  <div>
+                    <span>百位区（至少选择一个）</span>
+                    <ul>
+                      <li v-for="(item, index) in NumData.BaiWei" :key="index">
+                        <a :class="{'active': item.Active}" @click="SelectItem(item, 'BaiWei')">{{item.Num}}</a>
+                        <!-- <span>{{item.MissNum}}</span> -->
+                      </li>
+                    </ul>
+                  </div>
+                  <div>
+                    <span>十位区（至少选择一个）</span>
+                    <ul>
+                      <li v-for="(item, index) in NumData.ShiWei" :key="index">
+                        <a :class="{'active': item.Active}" @click="SelectItem(item, 'ShiWei')">{{item.Num}}</a>
+                        <!-- <span>{{item.MissNum}}</span> -->
+                      </li>
+                    </ul>
+                  </div>
+                  <div>
+                    <span>个位区（至少选择一个）</span>
+                    <ul>
+                      <li v-for="(item, index) in NumData.GeWei" :key="index">
+                        <a :class="{'active': item.Active}" @click="SelectItem(item, 'GeWei')">{{item.Num}}</a>
+                        <!-- <span>{{item.MissNum}}</span> -->
+                      </li>
+                    </ul>
+                  </div>
+                </div>
 
-    <!-- 选区 -->
-    <div class="flex-item">
-      <div>
-        <div>
-          <div class="SelectArea">
+                <!-- 机选 -->
+                <div class="JiXuanArea" v-if="SelectType === 2">
+                  <nav class="flex-h">
+                    <a class="flex-item" :class="{'active': RandomCount === 1}" @click="CutRandomCount(1)">注数1</a>
+                    <a class="flex-item" :class="{'active': RandomCount === 2}" @click="CutRandomCount(2)">注数2</a>
+                    <a class="flex-item" :class="{'active': RandomCount === 3}" @click="CutRandomCount(3)">注数3</a>
+                    <a class="flex-item" :class="{'active': RandomCount === 4}" @click="CutRandomCount(4)">注数4</a>
+                    <a class="flex-item" :class="{'active': RandomCount === 5}" @click="CutRandomCount(5)">注数5</a>
+                  </nav>
+                  <ul>
+                    <li v-for="(item, index) in RandomRes" :key="index">
+                      <span>{{item.WanWei[0]}}</span>
+                      <span>{{item.QianWei[0]}}</span>
+                      <span>{{item.BaiWei[0]}}</span>
+                      <span>{{item.ShiWei[0]}}</span>
+                      <span>{{item.GeWei[0]}}</span>
+                      <a class="iconfont iconjian" v-if="RandomRes.length > 1" @click="DeleteRandomResItem(index)"></a>
+                    </li>
+                  </ul>
+                </div>
 
-            <!-- 自选 -->
-            <div class="ZiXuanArea" v-if="SelectType === 1">
-              <div>
-                <span>万位区（至少选择一个）</span>
-                <ul>
-                  <li v-for="(item, index) in NumData.WanWei" :key="index">
-                    <a :class="{'active': item.Active}" @click="SelectItem(item, 'WanWei')">{{item.Num}}</a>
-                    <!-- <span>{{item.MissNum}}</span> -->
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <span>千位区（至少选择一个）</span>
-                <ul>
-                  <li v-for="(item, index) in NumData.QianWei" :key="index">
-                    <a :class="{'active': item.Active}" @click="SelectItem(item, 'QianWei')">{{item.Num}}</a>
-                    <!-- <span>{{item.MissNum}}</span> -->
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <span>百位区（至少选择一个）</span>
-                <ul>
-                  <li v-for="(item, index) in NumData.BaiWei" :key="index">
-                    <a :class="{'active': item.Active}" @click="SelectItem(item, 'BaiWei')">{{item.Num}}</a>
-                    <!-- <span>{{item.MissNum}}</span> -->
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <span>十位区（至少选择一个）</span>
-                <ul>
-                  <li v-for="(item, index) in NumData.ShiWei" :key="index">
-                    <a :class="{'active': item.Active}" @click="SelectItem(item, 'ShiWei')">{{item.Num}}</a>
-                    <!-- <span>{{item.MissNum}}</span> -->
-                  </li>
-                </ul>
-              </div>
-              <div>
-                <span>个位区（至少选择一个）</span>
-                <ul>
-                  <li v-for="(item, index) in NumData.GeWei" :key="index">
-                    <a :class="{'active': item.Active}" @click="SelectItem(item, 'GeWei')">{{item.Num}}</a>
-                    <!-- <span>{{item.MissNum}}</span> -->
-                  </li>
-                </ul>
               </div>
             </div>
-
-            <!-- 机选 -->
-            <div class="JiXuanArea" v-if="SelectType === 2">
-              <nav class="flex-h">
-                <a class="flex-item" :class="{'active': RandomCount === 1}" @click="CutRandomCount(1)">注数1</a>
-                <a class="flex-item" :class="{'active': RandomCount === 2}" @click="CutRandomCount(2)">注数2</a>
-                <a class="flex-item" :class="{'active': RandomCount === 3}" @click="CutRandomCount(3)">注数3</a>
-                <a class="flex-item" :class="{'active': RandomCount === 4}" @click="CutRandomCount(4)">注数4</a>
-                <a class="flex-item" :class="{'active': RandomCount === 5}" @click="CutRandomCount(5)">注数5</a>
-              </nav>
-              <ul>
-                <li v-for="(item, index) in RandomRes" :key="index">
-                  <span>{{item.WanWei[0]}}</span>
-                  <span>{{item.QianWei[0]}}</span>
-                  <span>{{item.BaiWei[0]}}</span>
-                  <span>{{item.ShiWei[0]}}</span>
-                  <span>{{item.GeWei[0]}}</span>
-                  <a class="iconfont iconjian" v-if="RandomRes.length > 1" @click="DeleteRandomResItem(index)"></a>
-                </li>
-              </ul>
-            </div>
-
           </div>
         </div>
-      </div>
-    </div>
-
-    <!-- 投注栏 -->
-    <div class="Bottom flex-h">
-      <span class="SelectRes">共<em>{{TotalResNum}}</em>注<em>{{TotalResNum * 2}}</em>元，奖金<em>0</em>元</span>
-      <a class="iconfont iconjian" v-if="SelectType === 1" @click="EmptySelectArea"></a>
-      <router-link :to="{ name: 'PaiLie5DingDan' }" class="iconfont icongouwuche"></router-link>
-      <div class="flex-item"></div>
-      <a class="Btn" :class="{'active': CanCreateRes}" @click="AddCart">添加号码蓝</a>
-      <a class="Btn" :class="{'active': CanCreateRes}" @click="CreateOrder">投注</a>
-    </div>
 
+        <!-- 投注栏 -->
+        <div class="Bottom flex-h">
+          <span class="SelectRes">共<em>{{TotalResNum}}</em>注<em>{{TotalResNum * 2}}</em>元，奖金<em>0</em>元</span>
+          <a class="iconfont iconjian" v-if="SelectType === 1" @click="EmptySelectArea"></a>
+          <router-link :to="{ name: 'PaiLie5DingDan' }" class="iconfont icongouwuche"></router-link>
+          <div class="flex-item"></div>
+          <a class="Btn" :class="{'active': CanCreateRes}" @click="AddCart">添加号码蓝</a>
+          <a class="Btn" :class="{'active': CanCreateRes}" @click="CreateOrder">投注</a>
+        </div>
+      </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -144,13 +128,9 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '排列5' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.CreateData()
   },
   mounted () {
@@ -158,9 +138,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserMutations([
       'AddPaiLie5Cart'
     ]),

src/pages/index/PaiLie5/page.scss

@@ -1,235 +1,244 @@
 .Page {
   background: #f8f8f8;
+  width: 100%;
+  height: 100%;
   position: relative;
-  > .HideNav {
+  overflow: hidden;
+  .PageContainer {
     width: 100%;
-    position: absolute;
-    z-index: 3;
-    background: #fff;
-    left: 0;
-    top: 0;
-    display: none;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    &.active {
-      display: block;
-    }
-    > div {
-      align-items: center;
-      > a {
-        text-align: center;
-        font-size: 0.12rem;
-        line-height: 0.4rem;
-        border-left: 0.01rem solid #f7f7f7;
-        &:first-child {
-          border-left: none;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    > .HideNav {
+      width: 100%;
+      position: absolute;
+      z-index: 3;
+      background: #fff;
+      left: 0;
+      top: 0;
+      display: none;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      &.active {
+        display: block;
+      }
+      > div {
+        align-items: center;
+        > a {
+          text-align: center;
+          font-size: 0.12rem;
+          line-height: 0.4rem;
+          border-left: 0.01rem solid #f7f7f7;
+          &:first-child {
+            border-left: none;
+          }
         }
       }
     }
-  }
-  > .Top {
-    background: #fff;
-    position: relative;
-    z-index: 2;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    > .Time {
-      align-items: center;
-      border-bottom: 0.01rem solid #f7f7f7;
-      > .Icon {
-        width: 0.16rem;
-        height: 0.16rem;
-        position: relative;
-        overflow: hidden;
-        margin-left: 0.15rem;
-        margin-right: 0.65rem;
-      }
-      > .flex-item {
-        position: relative;
-        > div {
-          width: 100%;
+    > .Top {
+      background: #fff;
+      position: relative;
+      z-index: 2;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      > .Time {
+        align-items: center;
+        border-bottom: 0.01rem solid #f7f7f7;
+        > .Icon {
+          width: 0.16rem;
+          height: 0.16rem;
           position: relative;
           overflow: hidden;
-          font-size: 0;
-          white-space: nowrap;
-          text-align: right;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.12rem;
-            color: #9a9a9a;
-            line-height: 0.28rem;
-            &.active {
-              color: #ff5200;
-            }
-            &:only-child {
-              margin-right: 0.15rem;
+          margin-left: 0.15rem;
+          margin-right: 0.65rem;
+        }
+        > .flex-item {
+          position: relative;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            font-size: 0;
+            white-space: nowrap;
+            text-align: right;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.12rem;
+              color: #9a9a9a;
+              line-height: 0.28rem;
+              &.active {
+                color: #ff5200;
+              }
+              &:only-child {
+                margin-right: 0.15rem;
+              }
             }
           }
         }
       }
     }
-  }
-  > nav {
-    background: #fff;
-    position: relative;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    > a {
-      text-align: center;
-      line-height: 0.4rem;
-      border-left: 0.01rem solid #f7f7f7;
+    > nav {
+      background: #fff;
       position: relative;
-      &:first-child {
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      > a {
+        text-align: center;
+        line-height: 0.4rem;
         border-left: 0.01rem solid #f7f7f7;
-      }
-      &.active {
-        color: #ff5200;
-        &::after {
-          content: "";
-          width: 0.4rem;
-          height: 0.02rem;
-          display: block;
-          background: #ff5200;
-          position: absolute;
-          left: 50%;
-          bottom: 0;
-          transform: translateX(-50%);
-          -webkit-transform: translateX(-50%);
+        position: relative;
+        &:first-child {
+          border-left: 0.01rem solid #f7f7f7;
+        }
+        &.active {
+          color: #ff5200;
+          &::after {
+            content: "";
+            width: 0.4rem;
+            height: 0.02rem;
+            display: block;
+            background: #ff5200;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translateX(-50%);
+            -webkit-transform: translateX(-50%);
+          }
         }
       }
     }
-  }
-  > .flex-item {
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
+    > .flex-item {
+      position: relative;
       overflow: hidden;
+      z-index: 1;
       > div {
         width: 100%;
-        height: 100%;
-        position: relative;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        > .SelectArea {
-          padding: 0.15rem;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        > div {
+          width: 100%;
+          height: 100%;
           position: relative;
-          overflow: hidden;
-          &.active {
-            padding: 0;
-            height: 100%;
-            width: 100%;
-          }
-          > div {
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          > .SelectArea {
+            padding: 0.15rem;
             position: relative;
-            overflow: visible;
-            &.ZiXuanArea {
-              > div {
-                background: #fff;
-                border-radius: 0.06rem;
-                position: relative;
-                overflow: hidden;
-                box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-                margin-top: 0.15rem;
-                &:first-child {
-                  margin-top: 0;
-                }
-                > span {
-                  display: block;
-                  font-size: 0.15rem;
-                  line-height: 0.4rem;
-                  text-indent: 0.15rem;
-                  border-bottom: 0.01rem solid #f7f7f7;
-                }
-                > ul {
-                  font-size: 0;
-                  padding-left: 0.1rem;
-                  padding-bottom: 0.1rem;
-                  > li {
-                    display: inline-block;
-                    vertical-align: middle;
-                    width: 0.28rem;
-                    position: relative;
-                    margin-right: 0.05rem;
-                    margin-top: 0.1rem;
-                    > a {
-                      width: 100%;
-                      font-size: 0.14rem;
-                      line-height: 0.28rem;
-                      border: 0.01rem solid #666;
-                      display: block;
-                      text-align: center;
-                      border-radius: 100%;
-                      &.active {
-                        background: #ff5200;
-                        border-color: #ff5200;
-                        color: #fff;
-                      }
-                    }
-                    > span {
-                      display: block;
-                      font-size: 0.14rem;
-                      text-align: center;
-                      line-height: 0.2rem;
-                      margin-top: 0.05rem;
-                    }
-                  }
-                }
-              }
+            overflow: hidden;
+            &.active {
+              padding: 0;
+              height: 100%;
+              width: 100%;
             }
-            &.JiXuanArea {
+            > div {
               position: relative;
-              overflow: hidden;
-              width: 100%;
-              > nav {
-                align-items: center;
-                > a {
-                  border: 0.01rem solid #ccc;
-                  border-radius: 0.03rem;
-                  text-align: center;
-                  margin-left: 0.1rem;
-                  line-height: 0.24rem;
-                  font-size: 0.12rem;
+              overflow: visible;
+              &.ZiXuanArea {
+                > div {
+                  background: #fff;
+                  border-radius: 0.06rem;
+                  position: relative;
+                  overflow: hidden;
+                  box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+                  margin-top: 0.15rem;
                   &:first-child {
-                    margin-left: 0;
+                    margin-top: 0;
                   }
-                  &.active {
-                    background: #ff5200;
-                    border-color: #ff5200;
-                    color: #fff;
+                  > span {
+                    display: block;
+                    font-size: 0.15rem;
+                    line-height: 0.4rem;
+                    text-indent: 0.15rem;
+                    border-bottom: 0.01rem solid #f7f7f7;
+                  }
+                  > ul {
+                    font-size: 0;
+                    padding-left: 0.1rem;
+                    padding-bottom: 0.1rem;
+                    > li {
+                      display: inline-block;
+                      vertical-align: middle;
+                      width: 0.28rem;
+                      position: relative;
+                      margin-right: 0.05rem;
+                      margin-top: 0.1rem;
+                      > a {
+                        width: 100%;
+                        font-size: 0.14rem;
+                        line-height: 0.28rem;
+                        border: 0.01rem solid #666;
+                        display: block;
+                        text-align: center;
+                        border-radius: 100%;
+                        &.active {
+                          background: #ff5200;
+                          border-color: #ff5200;
+                          color: #fff;
+                        }
+                      }
+                      > span {
+                        display: block;
+                        font-size: 0.14rem;
+                        text-align: center;
+                        line-height: 0.2rem;
+                        margin-top: 0.05rem;
+                      }
+                    }
                   }
                 }
               }
-              > ul {
-                margin-top: 0.5rem;
-                > li {
-                  text-align: center;
-                  font-size: 0;
-                  white-space: nowrap;
-                  margin-top: 0.1rem;
-                  > * {
-                    display: inline-block;
-                    vertical-align: middle;
+              &.JiXuanArea {
+                position: relative;
+                overflow: hidden;
+                width: 100%;
+                > nav {
+                  align-items: center;
+                  > a {
+                    border: 0.01rem solid #ccc;
+                    border-radius: 0.03rem;
+                    text-align: center;
+                    margin-left: 0.1rem;
+                    line-height: 0.24rem;
                     font-size: 0.12rem;
-                    margin-left: 0.05rem;
-                    color: #ff5200;
                     &:first-child {
                       margin-left: 0;
                     }
+                    &.active {
+                      background: #ff5200;
+                      border-color: #ff5200;
+                      color: #fff;
+                    }
                   }
-                  > span {
-                    width: 0.28rem;
-                    line-height: 0.28rem;
+                }
+                > ul {
+                  margin-top: 0.5rem;
+                  > li {
                     text-align: center;
-                    border-radius: 100%;
-                    background: #ff5200;
-                    color: #fff;
-                  }
-                  > a {
-                    font-size: 0.22rem;
+                    font-size: 0;
+                    white-space: nowrap;
+                    margin-top: 0.1rem;
+                    > * {
+                      display: inline-block;
+                      vertical-align: middle;
+                      font-size: 0.12rem;
+                      margin-left: 0.05rem;
+                      color: #ff5200;
+                      &:first-child {
+                        margin-left: 0;
+                      }
+                    }
+                    > span {
+                      width: 0.28rem;
+                      line-height: 0.28rem;
+                      text-align: center;
+                      border-radius: 100%;
+                      background: #ff5200;
+                      color: #fff;
+                    }
+                    > a {
+                      font-size: 0.22rem;
+                    }
                   }
                 }
               }
@@ -238,54 +247,54 @@
         }
       }
     }
-  }
-  > .Bottom {
-    background: #fff;
-    padding: 0.05rem 0.15rem;
-    align-items: center;
-    position: relative;
-    overflow: visible;
-    z-index: 2;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    > .SelectRes {
-      display: inline-block;
-      position: absolute;
-      right: 0.15rem;
-      top: -0.3rem;
-      font-size: 0.12rem;
-      line-height: 0.3rem;
-      > em {
-        color: #d91e36;
-        font-weight: bold;
-      }
-    }
-    > .iconfont {
-      font-size: 0.24rem;
-      color: #ff5200;
-      margin-right: 0.1rem;
-    }
-    > .flex-item {
+    > .Bottom {
+      background: #fff;
+      padding: 0.05rem 0.15rem;
+      align-items: center;
       position: relative;
-    }
-    > .Btn {
-      line-height: 0.28rem;
-      font-size: 0.13rem;
-      color: #ccc;
-      border: 0.01rem solid #ccc;
-      border-radius: 0.02rem;
-      margin-left: 0.15rem;
-      min-width: 0.7rem;
-      text-align: center;
-      &:last-child {
-        color: #fff;
-        background: #ccc;
+      overflow: visible;
+      z-index: 2;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      > .SelectRes {
+        display: inline-block;
+        position: absolute;
+        right: 0.15rem;
+        top: -0.3rem;
+        font-size: 0.12rem;
+        line-height: 0.3rem;
+        > em {
+          color: #d91e36;
+          font-weight: bold;
+        }
       }
-      &.active {
+      > .iconfont {
+        font-size: 0.24rem;
         color: #ff5200;
-        border: 0.01rem solid #ff5200;
+        margin-right: 0.1rem;
+      }
+      > .flex-item {
+        position: relative;
+      }
+      > .Btn {
+        line-height: 0.28rem;
+        font-size: 0.13rem;
+        color: #ccc;
+        border: 0.01rem solid #ccc;
+        border-radius: 0.02rem;
+        margin-left: 0.15rem;
+        min-width: 0.7rem;
+        text-align: center;
         &:last-child {
           color: #fff;
-          background: #ff5200;
+          background: #ccc;
+        }
+        &.active {
+          color: #ff5200;
+          border: 0.01rem solid #ff5200;
+          &:last-child {
+            color: #fff;
+            background: #ff5200;
+          }
         }
       }
     }

src/pages/index/PaiLie5DingDan/index.vue

@@ -1,135 +1,138 @@
 <template>
-  <div class="Page flex-v">
-
-    <a class="Store flex-h" @click="ShowStore = true">
-      <div class="flex-item">
-        <div>
-          <span>投注门店：{{CurrentStoreName || '请选择'}}</span>
-        </div>
-      </div>
-      <span>查看更多</span>
-      <i class="iconfont iconjiantouright"></i>
-    </a>
-
-    <div class="flex-item">
-      <div>
-
-        <div class="Title">
-          <span>订单信息</span>
-        </div>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderRight="true" MainHeaderRightIcon="iconqingkong" MainHeaderRightText="清空重选" :ShowMainHeaderBack="true" MainHeaderTitle="确认投注" :MainHeaderRightClick="() => { this.EmptyCart() }">
+      <div class="PageContainer flex-v">
+        <a class="Store flex-h" @click="ShowStore = true">
+          <div class="flex-item">
+            <div>
+              <span>投注门店：{{CurrentStoreName || '请选择'}}</span>
+            </div>
+          </div>
+          <span>查看更多</span>
+          <i class="iconfont iconjiantouright"></i>
+        </a>
 
-        <span v-if="!PageList.length">购物车空空如也</span>
+        <div class="flex-item">
+          <div>
 
-        <ul>
-          <li v-for="(item, index) in PageList" :key="index">
-            <a class="iconfont iconguanbi Close" @click="DeleteItem(item, index)"></a>
             <div class="Title">
-              <span>{{item.Type === 'Random' ? '机选' : '自选'}}普通</span>
-              <span>{{item.Count}}注{{item.Count * 2}}元</span>
+              <span>订单信息</span>
             </div>
+
+            <span v-if="!PageList.length">购物车空空如也</span>
+
             <ul>
-              <li v-for="(subItem, subIndex) in item.WanWei" :key="`WanWei-${subIndex}`">
-                <div class="centerLabel">
-                  <span>{{subItem}}</span>
-                  <span>万</span>
-                </div>
-              </li>
-              <li v-for="(subItem, subIndex) in item.QianWei" :key="`QianWei-${subIndex}`">
-                <div class="centerLabel">
-                  <span>{{subItem}}</span>
-                  <span>千</span>
-                </div>
-              </li>
-              <li v-for="(subItem, subIndex) in item.BaiWei" :key="`BaiWei-${subIndex}`">
-                <div class="centerLabel">
-                  <span>{{subItem}}</span>
-                  <span>百</span>
-                </div>
-              </li>
-              <li v-for="(subItem, subIndex) in item.ShiWei" :key="`ShiWei-${subIndex}`">
-                <div class="centerLabel">
-                  <span>{{subItem}}</span>
-                  <span>十</span>
-                </div>
-              </li>
-              <li v-for="(subItem, subIndex) in item.GeWei" :key="`GeWei-${subIndex}`">
-                <div class="centerLabel">
-                  <span>{{subItem}}</span>
-                  <span>个</span>
+              <li v-for="(item, index) in PageList" :key="index">
+                <a class="iconfont iconguanbi Close" @click="DeleteItem(item, index)"></a>
+                <div class="Title">
+                  <span>{{item.Type === 'Random' ? '机选' : '自选'}}普通</span>
+                  <span>{{item.Count}}注{{item.Count * 2}}元</span>
                 </div>
+                <ul>
+                  <li v-for="(subItem, subIndex) in item.WanWei" :key="`WanWei-${subIndex}`">
+                    <div class="centerLabel">
+                      <span>{{subItem}}</span>
+                      <span>万</span>
+                    </div>
+                  </li>
+                  <li v-for="(subItem, subIndex) in item.QianWei" :key="`QianWei-${subIndex}`">
+                    <div class="centerLabel">
+                      <span>{{subItem}}</span>
+                      <span>千</span>
+                    </div>
+                  </li>
+                  <li v-for="(subItem, subIndex) in item.BaiWei" :key="`BaiWei-${subIndex}`">
+                    <div class="centerLabel">
+                      <span>{{subItem}}</span>
+                      <span>百</span>
+                    </div>
+                  </li>
+                  <li v-for="(subItem, subIndex) in item.ShiWei" :key="`ShiWei-${subIndex}`">
+                    <div class="centerLabel">
+                      <span>{{subItem}}</span>
+                      <span>十</span>
+                    </div>
+                  </li>
+                  <li v-for="(subItem, subIndex) in item.GeWei" :key="`GeWei-${subIndex}`">
+                    <div class="centerLabel">
+                      <span>{{subItem}}</span>
+                      <span>个</span>
+                    </div>
+                  </li>
+                </ul>
               </li>
             </ul>
-          </li>
-        </ul>
-
-        <div class="Tips">
-          <span>排列五官方出票时间：</span>
-          <span>周一至周五 9:00 ~ 24:00 周六周日 9:00 ~ 次日1:00</span>
-        </div>
 
-      </div>
-    </div>
+            <div class="Tips">
+              <span>排列五官方出票时间：</span>
+              <span>周一至周五 9:00 ~ 24:00 周六周日 9:00 ~ 次日1:00</span>
+            </div>
 
-    <div class="Bottom">
-      <div class="flex-h">
-        <div class="flex-item">
-          <div>
-            <span><em>{{TotalCount}}</em>注<em>{{TotalCount * 2 * Multiple}}</em>元</span>
           </div>
         </div>
-        <span>
-          <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1"></a>
-          <input type="number" disabled="disabled" v-model="Multiple">
-          <span>倍</span>
-          <a class="iconfont iconjiahao" @click="Multiple += 1"></a>
-        </span>
-      </div>
-      <div class="flex-h">
-        <a @click="$router.go(-1)">自选号码</a>
-        <a @click="CutRandomCount(1)">机选一注</a>
-        <a class="flex-item" @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && PaiLie5Cart.length}">确认投注</a>
-      </div>
-    </div>
 
-    <div class="Layer" v-if="ShowStore">
-      <div class="centerLabel">
-        <span v-if="RecommendStoreList.length">推荐店铺：</span>
-        <ul v-if="RecommendStoreList.length">
-          <li v-for="(item, index) in RecommendStoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+        <div class="Bottom">
+          <div class="flex-h">
             <div class="flex-item">
               <div>
-                <span>{{item.name}}</span>
+                <span><em>{{TotalCount}}</em>注<em>{{TotalCount * 2 * Multiple}}</em>元</span>
               </div>
             </div>
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <span>选择附近店铺：</span>
-        <ul class="ScrollList">
-          <li v-for="(item, index) in StoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
-            <div class="flex-item">
-              <div>
-                <span>{{item.name}}</span>
-              </div>
+            <span>
+              <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1"></a>
+              <input type="number" disabled="disabled" v-model="Multiple">
+              <span>倍</span>
+              <a class="iconfont iconjiahao" @click="Multiple += 1"></a>
+            </span>
+          </div>
+          <div class="flex-h">
+            <a @click="$router.go(-1)">自选号码</a>
+            <a @click="CutRandomCount(1)">机选一注</a>
+            <a class="flex-item" @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && PaiLie5Cart.length}">确认投注</a>
+          </div>
+        </div>
+
+        <div class="Layer" v-if="ShowStore">
+          <div class="centerLabel">
+            <span v-if="RecommendStoreList.length">推荐店铺：</span>
+            <ul v-if="RecommendStoreList.length">
+              <li v-for="(item, index) in RecommendStoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <span>选择附近店铺：</span>
+            <ul class="ScrollList">
+              <li v-for="(item, index) in StoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <!-- <span>200m</span> -->
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <div class="Bottom flex-h">
+              <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
+              <a class="flex-item active" @click="ShowStore = false">确定</a>
             </div>
-            <!-- <span>200m</span> -->
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <div class="Bottom flex-h">
-          <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
-          <a class="flex-item active" @click="ShowStore = false">确定</a>
+          </div>
         </div>
       </div>
-    </div>
-
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -159,17 +162,9 @@ export default {
     })
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'MainHeaderRightClick', value: () => { this.EmptyCart() } },
-      { name: 'ShowMainHeaderRight', value: true },
-      { name: 'MainHeaderRightIcon', value: 'iconqingkong' },
-      { name: 'MainHeaderRightText', value: '清空重选' },
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '确认投注' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -177,9 +172,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserMutations([
       'AddPaiLie5Cart',
       'DeletePaiLie5Cart',

src/pages/index/PaiLie5DingDan/page.scss

@@ -1,346 +1,355 @@
 .Page {
   background: #f8f8f8;
+  width: 100%;
+  height: 100%;
   position: relative;
-  > .Store {
-    background: #fff;
-    padding: 0.15rem;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
     position: relative;
     overflow: hidden;
-    align-items: center;
-    z-index: 2;
-    > div {
+    > .Store {
+      background: #fff;
+      padding: 0.15rem;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
       position: relative;
+      overflow: hidden;
+      align-items: center;
+      z-index: 2;
       > div {
-        width: 100%;
         position: relative;
-        overflow: hidden;
-        > span {
-          display: block;
-          font-size: 0.15rem;
-          font-weight: bold;
-          color: #333;
-          line-height: 0.2rem;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-    > span {
-      font-size: 0.12rem;
-      color: #999;
-      margin-left: 0.1rem;
-    }
-    > i {
-      font-size: 0.12rem;
-      color: #999;
-    }
-  }
-  > div.flex-item {
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      overflow-y: scroll;
-      -webkit-overflow-scrolling: touch;
-      > .Title {
-        position: relative;
-        overflow: hidden;
-        text-align: center;
-        margin-top: 0.15rem;
-        &::after {
-          content: "";
-          display: block;
-          width: 70%;
-          height: 0.01rem;
-          background: #eee;
-          z-index: 1;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-          -webkit-transform: translate(-50%, -50%);
-        }
-        > span {
-          display: inline-block;
+        > div {
+          width: 100%;
           position: relative;
-          z-index: 2;
-          background: #f8f8f8;
-          font-size: 0.15rem;
-          font-weight: bold;
-          line-height: 0.2rem;
-          padding: 0 0.1rem;
+          overflow: hidden;
+          > span {
+            display: block;
+            font-size: 0.15rem;
+            font-weight: bold;
+            color: #333;
+            line-height: 0.2rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
         }
       }
       > span {
         font-size: 0.12rem;
         color: #999;
-        display: block;
-        line-height: 0.2rem;
-        text-align: center;
-        margin-top: 0.2rem;
+        margin-left: 0.1rem;
       }
-      > ul {
-        padding: 0.15rem;
-        > li {
-          background: #fff;
-          padding: 0.15rem;
-          box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+      > i {
+        font-size: 0.12rem;
+        color: #999;
+      }
+    }
+    > div.flex-item {
+      position: relative;
+      overflow: hidden;
+      z-index: 1;
+      > div {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;
+        > .Title {
           position: relative;
           overflow: hidden;
-          border-radius: 0.06rem;
+          text-align: center;
           margin-top: 0.15rem;
-          &:first-child {
-            margin-top: 0;
+          &::after {
+            content: "";
+            display: block;
+            width: 70%;
+            height: 0.01rem;
+            background: #eee;
+            z-index: 1;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            -webkit-transform: translate(-50%, -50%);
           }
-          > a.Close {
+          > span {
             display: inline-block;
-            position: absolute;
-            right: 0;
-            top: 0;
+            position: relative;
             z-index: 2;
-            font-size: 0.16rem;
-            color: #999;
+            background: #f8f8f8;
+            font-size: 0.15rem;
+            font-weight: bold;
+            line-height: 0.2rem;
+            padding: 0 0.1rem;
           }
-          > .Title {
-            font-size: 0;
-            white-space: nowrap;
-            > span {
+        }
+        > span {
+          font-size: 0.12rem;
+          color: #999;
+          display: block;
+          line-height: 0.2rem;
+          text-align: center;
+          margin-top: 0.2rem;
+        }
+        > ul {
+          padding: 0.15rem;
+          > li {
+            background: #fff;
+            padding: 0.15rem;
+            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+            position: relative;
+            overflow: hidden;
+            border-radius: 0.06rem;
+            margin-top: 0.15rem;
+            &:first-child {
+              margin-top: 0;
+            }
+            > a.Close {
               display: inline-block;
-              vertical-align: middle;
-              font-size: 0.12rem;
-              color: #333;
-              line-height: 0.2rem;
-              margin-left: 0.1rem;
-              &:first-child {
-                margin-left: 0;
+              position: absolute;
+              right: 0;
+              top: 0;
+              z-index: 2;
+              font-size: 0.16rem;
+              color: #999;
+            }
+            > .Title {
+              font-size: 0;
+              white-space: nowrap;
+              > span {
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 0.12rem;
+                color: #333;
+                line-height: 0.2rem;
+                margin-left: 0.1rem;
+                &:first-child {
+                  margin-left: 0;
+                }
               }
             }
-          }
-          > ul {
-            font-size: 0;
-            > li {
-              display: inline-block;
-              vertical-align: middle;
-              width: 0.3rem;
-              height: 0.3rem;
-              position: relative;
-              overflow: hidden;
-              border-radius: 100%;
-              background: #ff5200;
-              margin-top: 0.1rem;
-              margin-right: 0.05rem;
-              > div {
-                width: 100%;
-                > span {
-                  font-size: 0.12rem;
-                  color: #fff;
-                  line-height: 0.14rem;
-                  display: block;
-                  text-align: center;
+            > ul {
+              font-size: 0;
+              > li {
+                display: inline-block;
+                vertical-align: middle;
+                width: 0.3rem;
+                height: 0.3rem;
+                position: relative;
+                overflow: hidden;
+                border-radius: 100%;
+                background: #ff5200;
+                margin-top: 0.1rem;
+                margin-right: 0.05rem;
+                > div {
+                  width: 100%;
+                  > span {
+                    font-size: 0.12rem;
+                    color: #fff;
+                    line-height: 0.14rem;
+                    display: block;
+                    text-align: center;
+                  }
                 }
               }
             }
           }
         }
-      }
-      > div.Tips {
-        padding: 0.15rem 0;
-        > span {
-          display: block;
-          font-size: 0.1rem;
-          color: #666;
-          line-height: 0.2rem;
-          text-align: center;
+        > div.Tips {
+          padding: 0.15rem 0;
+          > span {
+            display: block;
+            font-size: 0.1rem;
+            color: #666;
+            line-height: 0.2rem;
+            text-align: center;
+          }
         }
       }
     }
-  }
-  > div.Bottom {
-    background: #fff;
-    padding: 0.15rem;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-    position: relative;
-    overflow: hidden;
-    z-index: 2;
-    > div {
-      &:nth-child(1) {
-        align-items: center;
-        > div {
-          position: relative;
+    > div.Bottom {
+      background: #fff;
+      padding: 0.15rem;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+      position: relative;
+      overflow: hidden;
+      z-index: 2;
+      > div {
+        &:nth-child(1) {
+          align-items: center;
           > div {
-            width: 100%;
             position: relative;
-            overflow: hidden;
-            > span {
-              display: block;
-              font-size: 0.13rem;
-              color: #333;
-              font-weight: bold;
-              line-height: 0.2rem;
-              > em {
+            > div {
+              width: 100%;
+              position: relative;
+              overflow: hidden;
+              > span {
+                display: block;
                 font-size: 0.13rem;
-                color: #d91d36;
+                color: #333;
                 font-weight: bold;
                 line-height: 0.2rem;
+                > em {
+                  font-size: 0.13rem;
+                  color: #d91d36;
+                  font-weight: bold;
+                  line-height: 0.2rem;
+                }
               }
             }
           }
-        }
-        > span {
-          display: inline-block;
-          margin-left: 0.1rem;
-          position: relative;
-          overflow: hidden;
-          border: 0.01rem solid #f7f7f7;
-          border-radius: 0.03rem;
-          font-size: 0;
-          white-space: nowrap;
-          > * {
+          > span {
             display: inline-block;
-            vertical-align: middle;
-            font-size: 0.14rem;
-            color: #999;
-            line-height: 0.24rem;
-            border-left: 0.01rem solid #f7f7f7;
-            &:first-child {
+            margin-left: 0.1rem;
+            position: relative;
+            overflow: hidden;
+            border: 0.01rem solid #f7f7f7;
+            border-radius: 0.03rem;
+            font-size: 0;
+            white-space: nowrap;
+            > * {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.14rem;
+              color: #999;
+              line-height: 0.24rem;
+              border-left: 0.01rem solid #f7f7f7;
+              &:first-child {
+                border: none;
+                border-right: 0.01rem solid #f7f7f7;
+              }
+            }
+            > a {
+              width: 0.24rem;
+              text-align: center;
+            }
+            > input {
               border: none;
-              border-right: 0.01rem solid #f7f7f7;
+              width: 0.35rem;
+              text-align: center;
+              color: #333;
+              &:disabled {
+                color: #333;
+              }
+            }
+            > span {
+              border: none;
+              margin-right: 0.03rem;
             }
           }
+        }
+        &:nth-child(2) {
+          align-items: center;
+          margin-top: 0.15rem;
           > a {
-            width: 0.24rem;
-            text-align: center;
-          }
-          > input {
-            border: none;
-            width: 0.35rem;
+            font-size: 0.15rem;
+            line-height: 0.4rem;
+            border: 0.01rem solid #ff5200;
+            color: #ff5200;
+            border-radius: 0.02rem;
+            margin-left: 0.15rem;
+            padding: 0 0.1rem;
             text-align: center;
-            color: #333;
-            &:disabled {
-              color: #333;
+            &:first-child {
+              margin-left: 0;
             }
-          }
-          > span {
-            border: none;
-            margin-right: 0.03rem;
-          }
-        }
-      }
-      &:nth-child(2) {
-        align-items: center;
-        margin-top: 0.15rem;
-        > a {
-          font-size: 0.15rem;
-          line-height: 0.4rem;
-          border: 0.01rem solid #ff5200;
-          color: #ff5200;
-          border-radius: 0.02rem;
-          margin-left: 0.15rem;
-          padding: 0 0.1rem;
-          text-align: center;
-          &:first-child {
-            margin-left: 0;
-          }
-          &.flex-item {
-            color: #fff;
-            background: #ccc;
-            border-color: #ccc;
-            &.active {
-              background: #ff5200;
-              border-color: #ff5200;
+            &.flex-item {
+              color: #fff;
+              background: #ccc;
+              border-color: #ccc;
+              &.active {
+                background: #ff5200;
+                border-color: #ff5200;
+              }
             }
           }
         }
       }
     }
-  }
-  > div.Layer {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 10;
-    background: rgba(0, 0, 0, 0.7);
-    > div {
-      width: 80%;
-      background: #fff;
-      border-radius: 0.06rem;
-      position: relative;
-      overflow: hidden;
-      padding-top: 0.15rem;
-      > span {
-        font-size: 0.14rem;
-        font-weight: bold;
-        color: #000;
-        line-height: 0.3rem;
-        display: block;
-        text-indent: 0.15rem;
-      }
-      > ul {
-        padding: 0 0.15rem;
+    > div.Layer {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      z-index: 10;
+      background: rgba(0, 0, 0, 0.7);
+      > div {
+        width: 80%;
+        background: #fff;
+        border-radius: 0.06rem;
         position: relative;
         overflow: hidden;
-        &.ScrollList {
-          max-height: 2.5rem;
-          overflow-y: scroll;
-          -webkit-overflow-scrolling: touch;
+        padding-top: 0.15rem;
+        > span {
+          font-size: 0.14rem;
+          font-weight: bold;
+          color: #000;
+          line-height: 0.3rem;
+          display: block;
+          text-indent: 0.15rem;
         }
-        > li {
-          align-items: center;
-          border-top: 0.01rem solid #f7f7f7;
-          &:first-child {
-            border: none;
+        > ul {
+          padding: 0 0.15rem;
+          position: relative;
+          overflow: hidden;
+          &.ScrollList {
+            max-height: 2.5rem;
+            overflow-y: scroll;
+            -webkit-overflow-scrolling: touch;
           }
-          > div {
-            position: relative;
+          > li {
+            align-items: center;
+            border-top: 0.01rem solid #f7f7f7;
+            &:first-child {
+              border: none;
+            }
             > div {
-              width: 100%;
               position: relative;
-              > span {
-                display: block;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                font-size: 0.14rem;
-                color: #333;
-                line-height: 0.42rem;
+              > div {
+                width: 100%;
+                position: relative;
+                > span {
+                  display: block;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  font-size: 0.14rem;
+                  color: #333;
+                  line-height: 0.42rem;
+                }
+              }
+            }
+            > span {
+              font-size: 0.14rem;
+              color: #999;
+              margin-right: 0.1rem;
+            }
+            > i {
+              font-size: 0.2rem;
+              color: #999;
+              &.active {
+                color: #ff5200;
               }
             }
           }
-          > span {
-            font-size: 0.14rem;
-            color: #999;
-            margin-right: 0.1rem;
-          }
-          > i {
-            font-size: 0.2rem;
-            color: #999;
+        }
+        > .Bottom {
+          border-top: 0.01rem solid #f7f7f7;
+          > a {
+            font-size: 0.16rem;
+            line-height: 0.42rem;
+            text-align: center;
+            border-left: 0.01rem solid #f7f7f7;
             &.active {
               color: #ff5200;
             }
-          }
-        }
-      }
-      > .Bottom {
-        border-top: 0.01rem solid #f7f7f7;
-        > a {
-          font-size: 0.16rem;
-          line-height: 0.42rem;
-          text-align: center;
-          border-left: 0.01rem solid #f7f7f7;
-          &.active {
-            color: #ff5200;
-          }
-          &:first-child {
-            border: none;
+            &:first-child {
+              border: none;
+            }
           }
         }
       }

src/pages/index/ShuangSeQiu/index.vue

@@ -1,111 +1,97 @@
 <template>
-  <div class="Page flex-v">
-
-    <div class="Top">
-      <!-- <div class="Time flex-h">
-        <div class="Icon">
-          <img src="../../../assets/img/icon5.png" class="centerLabel contain" alt="">
-        </div>
-        <div class="flex-item">
-          <div>
-            <span>剩余时间：</span>
-            <span>20:20:20</span>
-          </div>
-        </div>
-        <div class="flex-item">
-          <div>
-            <i class="iconfont iconliwu"></i>
-            <span class="active">20:20 开奖</span>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="双色球">
+      <div class="PageContainer flex-v">
+        <div class="Top">
+          <div class="PrevRes flex-h">
+            <span>077期</span>
+            <div class="flex-item">
+              <div>
+                <span>01</span>
+                <span>02</span>
+                <span>03</span>
+                <span>04</span>
+                <span>05</span>
+                <span class="active">06</span>
+              </div>
+            </div>
           </div>
         </div>
-      </div> -->
-      <div class="PrevRes flex-h">
-        <span>077期</span>
+
+        <!-- 选区 -->
         <div class="flex-item">
           <div>
-            <span>01</span>
-            <span>02</span>
-            <span>03</span>
-            <span>04</span>
-            <span>05</span>
-            <span class="active">06</span>
-          </div>
-        </div>
-      </div>
-    </div>
+            <div>
+              <div class="SelectArea">
 
-    <!-- 选区 -->
-    <div class="flex-item">
-      <div>
-        <div>
-          <div class="SelectArea">
+                <!-- 号码池 -->
+                <div class="NumberList">
+                  <div class="Title flex-h">
+                    <span class="flex-item">选中号码两次设胆</span>
+                    <!-- <a @click="ShowMiss = !ShowMiss">{{ShowMiss ? '隐藏' : '显示'}}遗漏</a> -->
+                  </div>
+                  <ul>
+                    <li v-for="(item, index) in FirstList" :key="index">
+                      <a :class="{'active': item.Active - 0 !== 0}" @click="SelectFirstItem(item, index)">
+                        <div class="centerLabel">
+                          <span>{{item.Num}}</span>
+                          <span v-if="item.Active - 0 === 2">胆</span>
+                        </div>
+                      </a>
+                      <span v-if="ShowMiss">{{item.MissNum}}</span>
+                    </li>
+                  </ul>
+                  <ul>
+                    <li v-for="(item, index) in LastList" :key="index">
+                      <a :class="{'active': item.Active - 0 !== 0}" @click="SelectLastItem(item, index)">
+                        <div class="centerLabel">
+                          <span>{{item.Num}}</span>
+                          <span v-if="item.Active - 0 === 2">胆</span>
+                        </div>
+                      </a>
+                      <span v-if="ShowMiss">{{item.MissNum}}</span>
+                    </li>
+                  </ul>
+                </div>
 
-            <!-- 号码池 -->
-            <div class="NumberList">
-              <div class="Title flex-h">
-                <span class="flex-item">选中号码两次设胆</span>
-                <!-- <a @click="ShowMiss = !ShowMiss">{{ShowMiss ? '隐藏' : '显示'}}遗漏</a> -->
-              </div>
-              <ul>
-                <li v-for="(item, index) in FirstList" :key="index">
-                  <a :class="{'active': item.Active - 0 !== 0}" @click="SelectFirstItem(item, index)">
-                    <div class="centerLabel">
-                      <span>{{item.Num}}</span>
-                      <span v-if="item.Active - 0 === 2">胆</span>
-                    </div>
-                  </a>
-                  <span v-if="ShowMiss">{{item.MissNum}}</span>
-                </li>
-              </ul>
-              <ul>
-                <li v-for="(item, index) in LastList" :key="index">
-                  <a :class="{'active': item.Active - 0 !== 0}" @click="SelectLastItem(item, index)">
-                    <div class="centerLabel">
-                      <span>{{item.Num}}</span>
-                      <span v-if="item.Active - 0 === 2">胆</span>
-                    </div>
-                  </a>
-                  <span v-if="ShowMiss">{{item.MissNum}}</span>
-                </li>
-              </ul>
-            </div>
+                <!-- 快速选区 -->
+                <div class="FastSelect">
+                  <span>快速选区</span>
+                  <div>
+                    <a @click="RandomOne" :class="{'active': FastSelectIndex === 0}">+机选1注</a>
+                    <a :class="{'active': FastSelectIndex === 1}" @click="RandomFive">+机选5注</a>
+                    <a @click="SelectAllLastArr" :class="{'active': FastSelectIndex === 2}">后区全包 <span>必中</span></a>
+                  </div>
+                </div>
 
-            <!-- 快速选区 -->
-            <div class="FastSelect">
-              <span>快速选区</span>
-              <div>
-                <a @click="RandomOne" :class="{'active': FastSelectIndex === 0}">+机选1注</a>
-                <a :class="{'active': FastSelectIndex === 1}" @click="RandomFive">+机选5注</a>
-                <a @click="SelectAllLastArr" :class="{'active': FastSelectIndex === 2}">后区全包 <span>必中</span></a>
               </div>
             </div>
-
           </div>
         </div>
-      </div>
-    </div>
 
-    <!-- 投注栏 -->
-    <div class="Bottom flex-h">
-      <a class="iconfont iconjian Delete"></a>
-      <div class="flex-item">
-        <div>
-          <div v-if="TotalResNum">
-            <span>￥{{TotalResNum * 2}}</span>
-            <span>{{TotalResNum}}注</span>
+        <!-- 投注栏 -->
+        <div class="Bottom flex-h">
+          <a class="iconfont iconjian Delete"></a>
+          <div class="flex-item">
+            <div>
+              <div v-if="TotalResNum">
+                <span>￥{{TotalResNum * 2}}</span>
+                <span>{{TotalResNum}}注</span>
+              </div>
+              <span v-else>至少选6橙球1蓝球</span>
+            </div>
           </div>
-          <span v-else>至少选6橙球1蓝球</span>
+          <a class="Btn" :class="{'active': CanCreateRes}" @click="AddToCart">加入选号</a>
+          <a class="Btn" :class="{'active': CanCreateRes}" @click="CreateOrder">投注</a>
         </div>
       </div>
-      <a class="Btn" :class="{'active': CanCreateRes}" @click="AddToCart">加入选号</a>
-      <a class="Btn" :class="{'active': CanCreateRes}" @click="CreateOrder">投注</a>
-    </div>
-
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 const { mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -124,13 +110,9 @@ export default {
   computed: {
   },
   components: {
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '双色球' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.CreatNumList() // 创建号码池数据
   },
   mounted () {
@@ -138,9 +120,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserMutations([
       'AddShuangSeQiuCart' // 新增双色球购物车
     ]),

src/pages/index/ShuangSeQiu/page.scss

@@ -1,322 +1,331 @@
 .Page {
   background: #f8f8f8;
+  width: 100%;
+  height: 100%;
   position: relative;
-  > .Top {
-    background: #fff;
+  overflow: hidden;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
     position: relative;
-    z-index: 2;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    > .Time {
-      align-items: center;
-      border-bottom: 0.01rem solid #f7f7f7;
-      > .Icon {
-        width: 0.16rem;
-        height: 0.16rem;
-        position: relative;
-        overflow: hidden;
-        margin-left: 0.15rem;
-        margin-right: 0.65rem;
-      }
-      > .flex-item {
-        position: relative;
-        > div {
-          width: 100%;
+    overflow: hidden;
+    > .Top {
+      background: #fff;
+      position: relative;
+      z-index: 2;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      > .Time {
+        align-items: center;
+        border-bottom: 0.01rem solid #f7f7f7;
+        > .Icon {
+          width: 0.16rem;
+          height: 0.16rem;
           position: relative;
           overflow: hidden;
-          font-size: 0;
-          white-space: nowrap;
-          text-align: right;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.12rem;
-            color: #9a9a9a;
-            line-height: 0.28rem;
-            &.active {
+          margin-left: 0.15rem;
+          margin-right: 0.65rem;
+        }
+        > .flex-item {
+          position: relative;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            font-size: 0;
+            white-space: nowrap;
+            text-align: right;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.12rem;
+              color: #9a9a9a;
+              line-height: 0.28rem;
+              &.active {
+                color: #ff5200;
+                margin-right: 0.15rem;
+              }
+            }
+            > i {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.15rem;
               color: #ff5200;
-              margin-right: 0.15rem;
+              margin-right: 0.05rem;
             }
           }
-          > i {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.15rem;
-            color: #ff5200;
-            margin-right: 0.05rem;
-          }
         }
       }
-    }
-    > .PrevRes {
-      align-items: center;
-      > span {
-        font-size: 0.12rem;
-        color: #9a9a9a;
-        line-height: 0.34rem;
-        margin-left: 0.15rem;
-        margin-right: 0.15rem;
-      }
-      > div {
-        position: relative;
-        overflow: hidden;
+      > .PrevRes {
+        align-items: center;
+        > span {
+          font-size: 0.12rem;
+          color: #9a9a9a;
+          line-height: 0.34rem;
+          margin-left: 0.15rem;
+          margin-right: 0.15rem;
+        }
         > div {
-          width: 100%;
           position: relative;
           overflow: hidden;
-          font-size: 0;
-          white-space: nowrap;
-          height: 0.18rem;
-          > span {
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.1rem;
-            color: #fff;
-            margin-left: 0.05rem;
-            width: 0.18rem;
+          > div {
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            font-size: 0;
+            white-space: nowrap;
             height: 0.18rem;
-            line-height: 0.18rem;
-            text-align: center;
-            background: #ff5200;
-            border-radius: 100%;
-            &.active {
-              background: #4064e5;
-            }
-            &:first-child {
-              margin-left: 0;
+            > span {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 0.1rem;
+              color: #fff;
+              margin-left: 0.05rem;
+              width: 0.18rem;
+              height: 0.18rem;
+              line-height: 0.18rem;
+              text-align: center;
+              background: #ff5200;
+              border-radius: 100%;
+              &.active {
+                background: #4064e5;
+              }
+              &:first-child {
+                margin-left: 0;
+              }
             }
           }
         }
       }
     }
-  }
-  > .flex-item {
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-    > div {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
+    > .flex-item {
+      position: relative;
       overflow: hidden;
+      z-index: 1;
       > div {
         width: 100%;
-        height: 100%;
-        position: relative;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        > .SelectArea {
-          padding: 0.15rem;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        > div {
+          width: 100%;
+          height: 100%;
           position: relative;
-          overflow: hidden;
-          > .NumberList {
-            background: #fff;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-            border-radius: 0.06rem;
-            > .Title {
-              align-items: center;
-              border-bottom: 0.01rem solid #f7f7f7;
-              > span {
-                font-size: 0.15rem;
-                line-height: 0.4rem;
-                text-indent: 0.15rem;
-              }
-              > a {
-                font-size: 0.1rem;
-                color: #ff5200;
-                margin-right: 0.15rem;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          > .SelectArea {
+            padding: 0.15rem;
+            position: relative;
+            overflow: hidden;
+            > .NumberList {
+              background: #fff;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+              border-radius: 0.06rem;
+              > .Title {
+                align-items: center;
+                border-bottom: 0.01rem solid #f7f7f7;
+                > span {
+                  font-size: 0.15rem;
+                  line-height: 0.4rem;
+                  text-indent: 0.15rem;
+                }
+                > a {
+                  font-size: 0.1rem;
+                  color: #ff5200;
+                  margin-right: 0.15rem;
+                }
               }
-            }
-            > ul {
-              border-bottom: 0.01rem solid #f7f7f7;
-              font-size: 0;
-              padding: 0 0.1rem 0.14rem;
-              &:last-child {
-                border-bottom: none;
+              > ul {
+                border-bottom: 0.01rem solid #f7f7f7;
+                font-size: 0;
+                padding: 0 0.1rem 0.14rem;
+                &:last-child {
+                  border-bottom: none;
+                  > li {
+                    > a {
+                      border-color: #3f63e5;
+                      &.active {
+                        background: #3f63e5;
+                      }
+                      > div {
+                        > span {
+                          color: #3f63e5;
+                        }
+                      }
+                    }
+                  }
+                }
                 > li {
+                  display: inline-block;
+                  vertical-align: middle;
+                  margin-left: 0.14rem;
+                  margin-top: 0.14rem;
+                  &:nth-child(7n + 1) {
+                    margin-left: 0;
+                  }
                   > a {
-                    border-color: #3f63e5;
+                    width: 0.32rem;
+                    height: 0.32rem;
+                    display: block;
+                    margin: 0 auto;
+                    border-radius: 100%;
+                    border: 0.01rem solid #ff5200;
+                    position: relative;
+                    overflow: hidden;
                     &.active {
-                      background: #3f63e5;
+                      background: #ff5200;
+                      > div {
+                        > span {
+                          color: #fff;
+                        }
+                      }
                     }
                     > div {
+                      width: 100%;
                       > span {
-                        color: #3f63e5;
+                        display: block;
+                        text-align: center;
+                        font-size: 0.1rem;
+                        color: #ff5200;
+                        line-height: 0.14rem;
+                        &:only-child {
+                          font-size: 0.13rem;
+                        }
                       }
                     }
                   }
+                  > span {
+                    display: block;
+                    text-align: center;
+                    font-size: 0.12rem;
+                    color: #666;
+                    line-height: 0.18rem;
+                  }
                 }
               }
-              > li {
-                display: inline-block;
-                vertical-align: middle;
-                margin-left: 0.14rem;
-                margin-top: 0.14rem;
-                &:nth-child(7n + 1) {
-                  margin-left: 0;
-                }
+            }
+            > .FastSelect {
+              background: #fff;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+              border-radius: 0.06rem;
+              margin-top: 0.15rem;
+              position: relative;
+              overflow: hidden;
+              > span {
+                display: block;
+                font-size: 0.15rem;
+                line-height: 0.4rem;
+                border-bottom: 0.01rem solid #f7f7f7;
+                text-indent: 0.15rem;
+              }
+              > div {
+                font-size: 0;
+                padding: 0.05rem 0.15rem 0.15rem 0.15rem;
                 > a {
-                  width: 0.32rem;
-                  height: 0.32rem;
-                  display: block;
-                  margin: 0 auto;
-                  border-radius: 100%;
+                  display: inline-block;
+                  font-size: 0.15rem;
+                  line-height: 0.32rem;
+                  border-radius: 0.06rem;
                   border: 0.01rem solid #ff5200;
+                  width: 1.5rem;
+                  text-align: center;
+                  margin-left: 0.1rem;
+                  margin-top: 0.1rem;
                   position: relative;
                   overflow: hidden;
+                  &:nth-child(2n + 1) {
+                    margin-left: 0;
+                  }
                   &.active {
                     background: #ff5200;
-                    > div {
-                      > span {
-                        color: #fff;
-                      }
-                    }
+                    color: #fff;
                   }
-                  > div {
-                    width: 100%;
-                    > span {
-                      display: block;
-                      text-align: center;
-                      font-size: 0.1rem;
-                      color: #ff5200;
-                      line-height: 0.14rem;
-                      &:only-child {
-                        font-size: 0.13rem;
-                      }
-                    }
+                  > span {
+                    display: inline-block;
+                    position: absolute;
+                    font-size: 0.1rem;
+                    right: 0;
+                    top: 0;
+                    line-height: 0.14rem;
+                    background: #ff5200;
+                    color: #fff;
+                    padding: 0 0.05rem;
+                    border-radius: 0 0 0 0.06rem;
                   }
                 }
-                > span {
-                  display: block;
-                  text-align: center;
-                  font-size: 0.12rem;
-                  color: #666;
-                  line-height: 0.18rem;
-                }
-              }
-            }
-          }
-          > .FastSelect {
-            background: #fff;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-            border-radius: 0.06rem;
-            margin-top: 0.15rem;
-            position: relative;
-            overflow: hidden;
-            > span {
-              display: block;
-              font-size: 0.15rem;
-              line-height: 0.4rem;
-              border-bottom: 0.01rem solid #f7f7f7;
-              text-indent: 0.15rem;
-            }
-            > div {
-              font-size: 0;
-              padding: 0.05rem 0.15rem 0.15rem 0.15rem;
-              > a {
-                display: inline-block;
-                font-size: 0.15rem;
-                line-height: 0.32rem;
-                border-radius: 0.06rem;
-                border: 0.01rem solid #ff5200;
-                width: 1.5rem;
-                text-align: center;
-                margin-left: 0.1rem;
-                margin-top: 0.1rem;
-                position: relative;
-                overflow: hidden;
-                &:nth-child(2n + 1) {
-                  margin-left: 0;
-                }
-                &.active {
-                  background: #ff5200;
-                  color: #fff;
-                }
-                > span {
-                  display: inline-block;
-                  position: absolute;
-                  font-size: 0.1rem;
-                  right: 0;
-                  top: 0;
-                  line-height: 0.14rem;
-                  background: #ff5200;
-                  color: #fff;
-                  padding: 0 0.05rem;
-                  border-radius: 0 0 0 0.06rem;
-                }
               }
             }
           }
         }
       }
     }
-  }
-  > .Bottom {
-    background: #fff;
-    padding: 0.05rem 0.15rem;
-    align-items: center;
-    position: relative;
-    z-index: 2;
-    box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
-    > .Delete {
-      font-size: 0.24rem;
-      color: #ff5200;
-      margin-right: 0.1rem;
-    }
-    > .flex-item {
+    > .Bottom {
+      background: #fff;
+      padding: 0.05rem 0.15rem;
+      align-items: center;
       position: relative;
-      > div {
-        width: 100%;
+      z-index: 2;
+      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.03);
+      > .Delete {
+        font-size: 0.24rem;
+        color: #ff5200;
+        margin-right: 0.1rem;
+      }
+      > .flex-item {
         position: relative;
-        font-size: 0;
-        white-space: nowrap;
-        text-align: right;
         > div {
-          display: inline-block;
-          vertical-align: middle;
-          float: left;
+          width: 100%;
+          position: relative;
+          font-size: 0;
+          white-space: nowrap;
+          text-align: right;
+          > div {
+            display: inline-block;
+            vertical-align: middle;
+            float: left;
+            > span {
+              display: block;
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              color: #666;
+              text-align: center;
+              &:first-child {
+                color: #ff5200;
+                font-size: 0.15rem;
+                font-weight: bold;
+              }
+            }
+          }
           > span {
-            display: block;
-            font-size: 0.12rem;
-            line-height: 0.2rem;
+            display: inline-block;
+            vertical-align: middle;
+            font-size: 0.14rem;
             color: #666;
-            text-align: center;
-            &:first-child {
-              color: #ff5200;
-              font-size: 0.15rem;
-              font-weight: bold;
-            }
+            line-height: 0.4rem;
           }
         }
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 0.14rem;
-          color: #666;
-          line-height: 0.4rem;
-        }
       }
-    }
-    > .Btn {
-      line-height: 0.28rem;
-      font-size: 0.13rem;
-      color: #ccc;
-      border: 0.01rem solid #ccc;
-      border-radius: 0.02rem;
-      margin-left: 0.15rem;
-      width: 0.6rem;
-      text-align: center;
-      &:last-child {
-        color: #fff;
-        background: #ccc;
-      }
-      &.active {
-        color: #ff5200;
-        border: 0.01rem solid #ff5200;
+      > .Btn {
+        line-height: 0.28rem;
+        font-size: 0.13rem;
+        color: #ccc;
+        border: 0.01rem solid #ccc;
+        border-radius: 0.02rem;
+        margin-left: 0.15rem;
+        width: 0.6rem;
+        text-align: center;
         &:last-child {
           color: #fff;
-          background: #ff5200;
+          background: #ccc;
+        }
+        &.active {
+          color: #ff5200;
+          border: 0.01rem solid #ff5200;
+          &:last-child {
+            color: #fff;
+            background: #ff5200;
+          }
         }
       }
     }

src/pages/index/ShuangSeQiuDingDan/index.vue

@@ -1,97 +1,101 @@
 <template>
-  <div class="Page flex-v">
-    <div class="flex-item">
-      <div>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="双色球">
+      <div class="PageContainer flex-v">
+        <div class="flex-item">
+          <div>
 
-        <ul>
-          <li v-for="(item, index) in PageList" :key="index">
-            <a class="iconfont iconguanbi Close" @click="DeleteItem(index)"></a>
-            <div class="flex-h">
-              <span class="flex-item">{{ReturnType(item)}}<em>{{item.Count}}</em>注<em>{{item.Count * 2}}</em>元</span>
-            </div>
             <ul>
-              <li v-for="(subItem, subIndex) in item.SortArr" :key="subIndex" :class="{'active': !subItem.IsFirst}">
-                <div class="centerLabel">
-                  <span>{{subItem.Num}}</span>
-                  <span v-if="subItem.IsDan">胆</span>
+              <li v-for="(item, index) in PageList" :key="index">
+                <a class="iconfont iconguanbi Close" @click="DeleteItem(index)"></a>
+                <div class="flex-h">
+                  <span class="flex-item">{{ReturnType(item)}}<em>{{item.Count}}</em>注<em>{{item.Count * 2}}</em>元</span>
                 </div>
+                <ul>
+                  <li v-for="(subItem, subIndex) in item.SortArr" :key="subIndex" :class="{'active': !subItem.IsFirst}">
+                    <div class="centerLabel">
+                      <span>{{subItem.Num}}</span>
+                      <span v-if="subItem.IsDan">胆</span>
+                    </div>
+                  </li>
+                </ul>
               </li>
             </ul>
-          </li>
-        </ul>
 
-        <div class="OtherTab">
-          <div>
-            <div class="flex-h">
-              <span class="flex-item">加倍</span>
-              <span>
-                <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1"></a>
-                <input type="number" disabled="disabled" v-model="Multiple">
-                <span>倍</span>
-                <a class="iconfont iconjiahao" @click="Multiple += 1"></a>
-              </span>
-            </div>
-            <div class="flex-h">
-              <span class="flex-item">是否追期？</span>
-              <span>追号喜中二等奖</span>
-              <van-switch v-model="IsAdd" active-color="#07c160" inactive-color="#ccc" size="0.13rem" @change="SwitchChange" />
+            <div class="OtherTab">
+              <div>
+                <div class="flex-h">
+                  <span class="flex-item">加倍</span>
+                  <span>
+                    <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1"></a>
+                    <input type="number" disabled="disabled" v-model="Multiple">
+                    <span>倍</span>
+                    <a class="iconfont iconjiahao" @click="Multiple += 1"></a>
+                  </span>
+                </div>
+                <div class="flex-h">
+                  <span class="flex-item">是否追期？</span>
+                  <span>追号喜中二等奖</span>
+                  <van-switch v-model="IsAdd" active-color="#07c160" inactive-color="#ccc" size="0.13rem" @change="SwitchChange" />
+                </div>
+              </div>
             </div>
+
           </div>
         </div>
+        <div class="Bottom">
+          <div class="Store">
+            <a @click="ShowStore = true">店铺：{{CurrentStoreName || '请选择'}}</a>
+          </div>
+          <div class="Count">
+            <span><em>{{TotalCount}}</em>注</span>
+            <span>金额：<em>{{TotalPrize}}</em>元</span>
+          </div>
+          <a @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && ShuangSeQiuCart.length}">立即购买</a>
+        </div>
 
-      </div>
-    </div>
-    <div class="Bottom">
-      <div class="Store">
-        <a @click="ShowStore = true">店铺：{{CurrentStoreName || '请选择'}}</a>
-      </div>
-      <div class="Count">
-        <span><em>{{TotalCount}}</em>注</span>
-        <span>金额：<em>{{TotalPrize}}</em>元</span>
-      </div>
-      <a @click="ToPostBetting" :class="{'active': CurrentStoreId !== null && ShuangSeQiuCart.length}">立即购买</a>
-    </div>
-
-    <div class="Layer" v-if="ShowStore">
-      <div class="centerLabel">
-        <span v-if="RecommendStoreList.length">推荐店铺：</span>
-        <ul v-if="RecommendStoreList.length">
-          <li v-for="(item, index) in RecommendStoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
-            <div class="flex-item">
-              <div>
-                <span>{{item.name}}</span>
-              </div>
-            </div>
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <span>选择附近店铺：</span>
-        <ul class="ScrollList">
-          <li v-for="(item, index) in StoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
-            <div class="flex-item">
-              <div>
-                <span>{{item.name}}</span>
-              </div>
+        <div class="Layer" v-if="ShowStore">
+          <div class="centerLabel">
+            <span v-if="RecommendStoreList.length">推荐店铺：</span>
+            <ul v-if="RecommendStoreList.length">
+              <li v-for="(item, index) in RecommendStoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <span>选择附近店铺：</span>
+            <ul class="ScrollList">
+              <li v-for="(item, index) in StoreList" :key="index" v-if="item.status - 0 === 1" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <!-- <span>200m</span> -->
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <div class="Bottom flex-h">
+              <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
+              <a class="flex-item active" @click="ShowStore = false">确定</a>
             </div>
-            <!-- <span>200m</span> -->
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <div class="Bottom flex-h">
-          <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
-          <a class="flex-item active" @click="ShowStore = false">确定</a>
+          </div>
         </div>
       </div>
-    </div>
-
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
+import MainPageContainer from '../../../components/common/MainPageContainer'
 import { Switch } from 'vant'
-import { mapMutations, createNamespacedHelpers } from 'vuex'
+import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -116,14 +120,10 @@ export default {
     })
   },
   components: {
+    MainPageContainer,
     'van-switch': Switch
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '双色球' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.PageList = [...this.ShuangSeQiuCart]
     this.CheckOrderCount() // 计算订单倍数、金额
     this.GetStoreList({
@@ -141,9 +141,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserMutations([
       'DeleteShuangSeQiuCart',
       'EmptyShuangSeQiuCart'

src/pages/index/ShuangSeQiuDingDan/page.scss

@@ -1,184 +1,192 @@
 .Page {
   background: #f8f8f8;
+  width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
-  > div {
-    &.flex-item {
-      position: relative;
-      overflow: hidden;
-      z-index: 1;
-      > div {
-        width: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        > ul {
-          padding: 0.15rem;
-          position: relative;
-          > li {
-            background: #fff;
-            position: relative;
-            overflow: visible;
+  .PageContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    > div {
+      &.flex-item {
+        position: relative;
+        overflow: hidden;
+        z-index: 1;
+        > div {
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          > ul {
             padding: 0.15rem;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-            margin-top: 0.15rem;
-            border-radius: 0.06rem;
-            &:first-child {
-              margin-top: 0;
-            }
-            > .Close {
-              display: inline-block;
-              position: absolute;
-              right: 0;
-              top: 0;
-              font-size: 0.2rem;
-              color: #999;
-            }
-            > div {
-              align-items: center;
-              > span {
-                &:first-child {
-                  font-size: 0.12rem;
-                  line-height: 0.2rem;
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  > em {
-                    color: #d91d36;
+            position: relative;
+            > li {
+              background: #fff;
+              position: relative;
+              overflow: visible;
+              padding: 0.15rem;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+              margin-top: 0.15rem;
+              border-radius: 0.06rem;
+              &:first-child {
+                margin-top: 0;
+              }
+              > .Close {
+                display: inline-block;
+                position: absolute;
+                right: 0;
+                top: 0;
+                font-size: 0.2rem;
+                color: #999;
+              }
+              > div {
+                align-items: center;
+                > span {
+                  &:first-child {
                     font-size: 0.12rem;
                     line-height: 0.2rem;
-                    font-weight: bold;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    > em {
+                      color: #d91d36;
+                      font-size: 0.12rem;
+                      line-height: 0.2rem;
+                      font-weight: bold;
+                    }
                   }
                 }
               }
-            }
-            > ul {
-              font-size: 0;
-              > li {
-                display: inline-block;
-                vertical-align: middle;
-                width: 0.32rem;
-                height: 0.32rem;
-                border-radius: 100%;
-                position: relative;
-                overflow: hidden;
-                background: #ff5200;
-                margin-right: 0.12rem;
-                margin-top: 0.1rem;
-                &.active {
-                  background: #3f63e5;
-                }
-                > div {
-                  width: 100%;
-                  > span {
-                    font-size: 0.12rem;
-                    display: block;
-                    text-align: center;
-                    color: #fff;
-                    line-height: 0.14rem;
+              > ul {
+                font-size: 0;
+                > li {
+                  display: inline-block;
+                  vertical-align: middle;
+                  width: 0.32rem;
+                  height: 0.32rem;
+                  border-radius: 100%;
+                  position: relative;
+                  overflow: hidden;
+                  background: #ff5200;
+                  margin-right: 0.12rem;
+                  margin-top: 0.1rem;
+                  &.active {
+                    background: #3f63e5;
+                  }
+                  > div {
+                    width: 100%;
+                    > span {
+                      font-size: 0.12rem;
+                      display: block;
+                      text-align: center;
+                      color: #fff;
+                      line-height: 0.14rem;
+                    }
                   }
                 }
               }
             }
           }
-        }
-        > .OtherTab {
-          padding: 0 0.15rem;
-          position: relative;
-          margin-bottom: 0.15rem;
-          > div {
-            background: #fff;
-            border-radius: 0.06rem;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+          > .OtherTab {
+            padding: 0 0.15rem;
+            position: relative;
+            margin-bottom: 0.15rem;
             > div {
-              padding: 0.15rem;
-              border-top: 0.01rem solid #f7f7f7;
-              align-items: center;
-              &:first-child {
-                border-top: none;
-              }
-              &:nth-child(1) {
-                > span {
-                  &:nth-child(1) {
-                    font-size: 0.15rem;
-                    color: #666;
-                    line-height: 0.2rem;
-                  }
-                  &:nth-child(2) {
-                    display: inline-block;
-                    margin-left: 0.1rem;
-                    position: relative;
-                    overflow: hidden;
-                    border: 0.01rem solid #f7f7f7;
-                    border-radius: 0.03rem;
-                    font-size: 0;
-                    white-space: nowrap;
-                    > * {
-                      display: inline-block;
-                      vertical-align: middle;
-                      font-size: 0.14rem;
-                      color: #999;
+              background: #fff;
+              border-radius: 0.06rem;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+              > div {
+                padding: 0.15rem;
+                border-top: 0.01rem solid #f7f7f7;
+                align-items: center;
+                &:first-child {
+                  border-top: none;
+                }
+                &:nth-child(1) {
+                  > span {
+                    &:nth-child(1) {
+                      font-size: 0.15rem;
+                      color: #666;
                       line-height: 0.2rem;
-                      border-left: 0.01rem solid #f7f7f7;
-                      &:first-child {
-                        border: none;
-                        border-right: 0.01rem solid #f7f7f7;
-                      }
-                    }
-                    > a {
-                      width: 0.2rem;
-                      text-align: center;
                     }
-                    > input {
-                      border: none;
-                      width: 0.35rem;
-                      text-align: center;
-                      color: #333;
-                      &:disabled {
+                    &:nth-child(2) {
+                      display: inline-block;
+                      margin-left: 0.1rem;
+                      position: relative;
+                      overflow: hidden;
+                      border: 0.01rem solid #f7f7f7;
+                      border-radius: 0.03rem;
+                      font-size: 0;
+                      white-space: nowrap;
+                      > * {
+                        display: inline-block;
+                        vertical-align: middle;
+                        font-size: 0.14rem;
+                        color: #999;
+                        line-height: 0.2rem;
+                        border-left: 0.01rem solid #f7f7f7;
+                        &:first-child {
+                          border: none;
+                          border-right: 0.01rem solid #f7f7f7;
+                        }
+                      }
+                      > a {
+                        width: 0.2rem;
+                        text-align: center;
+                      }
+                      > input {
+                        border: none;
+                        width: 0.35rem;
+                        text-align: center;
                         color: #333;
+                        &:disabled {
+                          color: #333;
+                        }
+                      }
+                      > span {
+                        border: none;
+                        margin-right: 0.03rem;
                       }
-                    }
-                    > span {
-                      border: none;
-                      margin-right: 0.03rem;
                     }
                   }
                 }
-              }
-              &:nth-child(2) {
-                > span {
-                  &:nth-child(1) {
-                    font-size: 0.15rem;
-                    color: #666;
-                    line-height: 0.2rem;
-                  }
-                  &:nth-child(2) {
-                    font-size: 0.1rem;
-                    color: #fff;
-                    display: inline-block;
-                    position: relative;
-                    overflow: visible;
-                    background: #ff5200;
-                    border-radius: 0.02rem;
-                    padding: 0 0.05rem;
-                    line-height: 0.16rem;
-                    margin-right: 0.1rem;
-                    &::after {
-                      content: "";
-                      width: 0;
-                      height: 0;
-                      border-width: 0.04rem;
-                      display: block;
-                      position: absolute;
-                      right: -0.07rem;
-                      top: 50%;
-                      transform: translateY(-50%) rotateZ(90deg);
-                      -webkit-transform: translateY(-50%) rotateZ(90deg);
-                      border-style: solid solid dashed solid;
-                      border-color: transparent transparent #ff5200 transparent;
+                &:nth-child(2) {
+                  > span {
+                    &:nth-child(1) {
+                      font-size: 0.15rem;
+                      color: #666;
+                      line-height: 0.2rem;
+                    }
+                    &:nth-child(2) {
+                      font-size: 0.1rem;
+                      color: #fff;
+                      display: inline-block;
+                      position: relative;
+                      overflow: visible;
+                      background: #ff5200;
+                      border-radius: 0.02rem;
+                      padding: 0 0.05rem;
+                      line-height: 0.16rem;
+                      margin-right: 0.1rem;
+                      &::after {
+                        content: "";
+                        width: 0;
+                        height: 0;
+                        border-width: 0.04rem;
+                        display: block;
+                        position: absolute;
+                        right: -0.07rem;
+                        top: 50%;
+                        transform: translateY(-50%) rotateZ(90deg);
+                        -webkit-transform: translateY(-50%) rotateZ(90deg);
+                        border-style: solid solid dashed solid;
+                        border-color: transparent transparent #ff5200 transparent;
+                      }
                     }
                   }
                 }
@@ -187,146 +195,146 @@
           }
         }
       }
-    }
-    &.Bottom {
-      background: #fff;
-      position: relative;
-      overflow: hidden;
-      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-      z-index: 2;
-      padding: 0.15rem;
-      padding-bottom: 0.2rem;
-      > .Store {
-        font-size: 0;
-        text-align: center;
-        > a {
-          display: inline-block;
-          font-size: 0.14rem;
-          color: #333;
-          line-height: 0.2rem;
-          max-width: 100%;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-      }
-      > .Count {
-        font-size: 0;
-        text-align: center;
-        white-space: nowrap;
-        margin-top: 0.05rem;
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 0.12rem;
-          color: #333;
-          line-height: 0.2rem;
-          margin-left: 0.1rem;
-          &:first-child {
-            margin-left: 0;
+      &.Bottom {
+        background: #fff;
+        position: relative;
+        overflow: hidden;
+        box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+        z-index: 2;
+        padding: 0.15rem;
+        padding-bottom: 0.2rem;
+        > .Store {
+          font-size: 0;
+          text-align: center;
+          > a {
+            display: inline-block;
+            font-size: 0.14rem;
+            color: #333;
+            line-height: 0.2rem;
+            max-width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
           }
-          > em {
-            color: #d91d36;
+        }
+        > .Count {
+          font-size: 0;
+          text-align: center;
+          white-space: nowrap;
+          margin-top: 0.05rem;
+          > span {
+            display: inline-block;
+            vertical-align: middle;
             font-size: 0.12rem;
+            color: #333;
             line-height: 0.2rem;
-            font-weight: bold;
+            margin-left: 0.1rem;
+            &:first-child {
+              margin-left: 0;
+            }
+            > em {
+              color: #d91d36;
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              font-weight: bold;
+            }
           }
         }
-      }
-      > a {
-        display: block;
-        text-align: center;
-        font-size: 0.16rem;
-        line-height: 0.42rem;
-        background: #ccc;
-        border-radius: 0.06rem;
-        color: #fff;
-        margin-top: 0.1rem;
-        &.active {
-          background: #ff5200;
-        }
-      }
-    }
-    &.Layer {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      z-index: 10;
-      background: rgba(0, 0, 0, 0.7);
-      > div {
-        width: 80%;
-        background: #fff;
-        border-radius: 0.06rem;
-        position: relative;
-        overflow: hidden;
-        padding-top: 0.15rem;
-        > span {
-          font-size: 0.14rem;
-          font-weight: bold;
-          color: #000;
-          line-height: 0.3rem;
+        > a {
           display: block;
-          text-indent: 0.15rem;
+          text-align: center;
+          font-size: 0.16rem;
+          line-height: 0.42rem;
+          background: #ccc;
+          border-radius: 0.06rem;
+          color: #fff;
+          margin-top: 0.1rem;
+          &.active {
+            background: #ff5200;
+          }
         }
-        > ul {
-          padding: 0 0.15rem;
+      }
+      &.Layer {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 10;
+        background: rgba(0, 0, 0, 0.7);
+        > div {
+          width: 80%;
+          background: #fff;
+          border-radius: 0.06rem;
           position: relative;
           overflow: hidden;
-          &.ScrollList {
-            max-height: 2.5rem;
-            overflow-y: scroll;
-            -webkit-overflow-scrolling: touch;
+          padding-top: 0.15rem;
+          > span {
+            font-size: 0.14rem;
+            font-weight: bold;
+            color: #000;
+            line-height: 0.3rem;
+            display: block;
+            text-indent: 0.15rem;
           }
-          > li {
-            align-items: center;
-            border-top: 0.01rem solid #f7f7f7;
-            &:first-child {
-              border: none;
+          > ul {
+            padding: 0 0.15rem;
+            position: relative;
+            overflow: hidden;
+            &.ScrollList {
+              max-height: 2.5rem;
+              overflow-y: scroll;
+              -webkit-overflow-scrolling: touch;
             }
-            > div {
-              position: relative;
+            > li {
+              align-items: center;
+              border-top: 0.01rem solid #f7f7f7;
+              &:first-child {
+                border: none;
+              }
               > div {
-                width: 100%;
                 position: relative;
-                > span {
-                  display: block;
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  font-size: 0.14rem;
-                  color: #333;
-                  line-height: 0.42rem;
+                > div {
+                  width: 100%;
+                  position: relative;
+                  > span {
+                    display: block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-size: 0.14rem;
+                    color: #333;
+                    line-height: 0.42rem;
+                  }
+                }
+              }
+              > span {
+                font-size: 0.14rem;
+                color: #999;
+                margin-right: 0.1rem;
+              }
+              > i {
+                font-size: 0.2rem;
+                color: #999;
+                &.active {
+                  color: #ff5200;
                 }
               }
             }
-            > span {
-              font-size: 0.14rem;
-              color: #999;
-              margin-right: 0.1rem;
-            }
-            > i {
-              font-size: 0.2rem;
-              color: #999;
+          }
+          > .Bottom {
+            border-top: 0.01rem solid #f7f7f7;
+            > a {
+              font-size: 0.16rem;
+              line-height: 0.42rem;
+              text-align: center;
+              border-left: 0.01rem solid #f7f7f7;
               &.active {
                 color: #ff5200;
               }
-            }
-          }
-        }
-        > .Bottom {
-          border-top: 0.01rem solid #f7f7f7;
-          > a {
-            font-size: 0.16rem;
-            line-height: 0.42rem;
-            text-align: center;
-            border-left: 0.01rem solid #f7f7f7;
-            &.active {
-              color: #ff5200;
-            }
-            &:first-child {
-              border: none;
+              &:first-child {
+                border: none;
+              }
             }
           }
         }

src/pages/index/ZuQiuDingDan/index.vue

@@ -1,117 +1,122 @@
 <template>
-  <div class="Page flex-v">
-    <div class="flex-item">
-      <div>
+  <div class="Page">
+    <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="足球">
+      <div class="PageContainer flex-v">
+        <div class="flex-item">
+          <div>
+
+            <ul>
+              <li v-for="(item, index) in PageList" :key="index">
+                <a class="iconfont iconguanbi Close" @click="DeleteItem(index)"></a>
+                <div class="Title flex-h">
+                  <span>{{item.id}}</span>
+                  <div class="flex-item">
+                    <div>
+                      <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="List A">
+                  <span v-for="(subItem, subIndex) in item.list" :key="subIndex">{{subItem.name}}</span>
+                </div>
+              </li>
+            </ul>
 
-        <ul>
-          <li v-for="(item, index) in PageList" :key="index">
-            <a class="iconfont iconguanbi Close" @click="DeleteItem(index)"></a>
-            <div class="Title flex-h">
-              <span>{{item.id}}</span>
-              <div class="flex-item">
-                <div>
-                  <span>{{item.homeTeamName}} VS {{item.awayTeamName}}</span>
+            <div class="OtherTab">
+              <div>
+                <div class="flex-h">
+                  <span class="flex-item">加倍</span>
+                  <span>
+                    <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1; TotalPrice = TotalCount * 2 * Multiple"></a>
+                    <input type="number" disabled="disabled" v-model="Multiple">
+                    <span>倍</span>
+                    <a class="iconfont iconjiahao" @click="Multiple += 1; TotalPrice = TotalCount * 2 * Multiple"></a>
+                  </span>
                 </div>
               </div>
             </div>
-            <div class="List A">
-              <span v-for="(subItem, subIndex) in item.list" :key="subIndex">{{subItem.name}}</span>
-            </div>
-          </li>
-        </ul>
 
-        <div class="OtherTab">
-          <div>
-            <div class="flex-h">
-              <span class="flex-item">加倍</span>
-              <span>
-                <a class="iconfont iconjianhao" @click="Multiple = Multiple > 1 ? Multiple - 1 : 1; TotalPrice = TotalCount * 2 * Multiple"></a>
-                <input type="number" disabled="disabled" v-model="Multiple">
-                <span>倍</span>
-                <a class="iconfont iconjiahao" @click="Multiple += 1; TotalPrice = TotalCount * 2 * Multiple"></a>
-              </span>
-            </div>
           </div>
         </div>
 
-      </div>
-    </div>
-
-    <div class="Bottom">
-      <div class="Store">
-        <a @click="ShowStore = true">店铺：{{CurrentStoreName || '请选择'}}</a>
-      </div>
-      <div class="Chuan" v-if="$route.query.type === 'mix'">
-        <span @click="ShowPassWay = true">{{CurrentPassName || '请选择过关方式'}}</span>
-      </div>
-      <div class="Count">
-        <span>
-          <em>{{TotalCount}}</em>注
-        </span>
-        <span>金额：<em>{{TotalPrice}}</em>元</span>
-        <span>预计奖金：<em>{{(PriceArr[0] * Multiple).toFixed(2)}} ~ {{(PriceArr[1] * Multiple).toFixed(2)}}</em>元</span>
-      </div>
-      <a :class="{'active': CurrentStoreId !== null && ZuQiuCart.length}" @click="ToPostBetting">立即购买</a>
-    </div>
-
-    <div class="Layer" v-if="ShowPassWay">
-      <div class="centerLabel">
-        <span>自由过关</span>
-        <nav>
-          <a v-for="(item, index) in FootballKeys.passes" :key="index" v-if="item.unitNum <= PageList.length && item.unitNum > 1 && item.amount === 1" :class="{'active': item.passCode === CurrentPassCode}" @click="CutPassCode(item)">{{item.name}}</a>
-        </nav>
-        <span>多串过关</span>
-        <nav>
-          <a v-for="(item, index) in FootballKeys.passes" :key="index" v-if="item.unitNum <= PageList.length && item.unitNum > 2 && item.amount !== 1" :class="{'active': item.passCode === CurrentPassCode}" @click="CutPassCode(item)">{{item.name}}</a>
-        </nav>
-        <div class="Bottom flex-h">
-          <a class="flex-item" @click="ShowPassWay = false">取消</a>
-          <a class="flex-item active" @click="ShowPassWay = false">确定</a>
+        <div class="Bottom">
+          <div class="Store">
+            <a @click="ShowStore = true">店铺：{{CurrentStoreName || '请选择'}}</a>
+          </div>
+          <div class="Chuan" v-if="$route.query.type === 'mix'">
+            <span @click="ShowPassWay = true">{{CurrentPassName || '请选择过关方式'}}</span>
+          </div>
+          <div class="Count">
+            <span>
+              <em>{{TotalCount}}</em>注
+            </span>
+            <span>金额：<em>{{TotalPrice}}</em>元</span>
+            <span>预计奖金：<em>{{(PriceArr[0] * Multiple).toFixed(2)}} ~ {{(PriceArr[1] * Multiple).toFixed(2)}}</em>元</span>
+          </div>
+          <a :class="{'active': CurrentStoreId !== null && ZuQiuCart.length}" @click="ToPostBetting">立即购买</a>
         </div>
-      </div>
-    </div>
 
-    <div class="Layer" v-if="ShowStore">
-      <div class="centerLabel">
-        <span v-if="RecommendStoreList.length">推荐店铺：</span>
-        <ul v-if="RecommendStoreList.length">
-          <li v-for="(item, index) in RecommendStoreList" :key="index" class="flex-h" @click="SelectStore(item)">
-            <div class="flex-item">
-              <div>
-                <span>{{item.name}}</span>
-              </div>
+        <div class="Layer" v-if="ShowPassWay">
+          <div class="centerLabel">
+            <span>自由过关</span>
+            <nav>
+              <a v-for="(item, index) in FootballKeys.passes" :key="index" v-if="item.unitNum <= PageList.length && item.unitNum > 1 && item.amount === 1" :class="{'active': item.passCode === CurrentPassCode}" @click="CutPassCode(item)">{{item.name}}</a>
+            </nav>
+            <span>多串过关</span>
+            <nav>
+              <a v-for="(item, index) in FootballKeys.passes" :key="index" v-if="item.unitNum <= PageList.length && item.unitNum > 2 && item.amount !== 1" :class="{'active': item.passCode === CurrentPassCode}" @click="CutPassCode(item)">{{item.name}}</a>
+            </nav>
+            <div class="Bottom flex-h">
+              <a class="flex-item" @click="ShowPassWay = false">取消</a>
+              <a class="flex-item active" @click="ShowPassWay = false">确定</a>
             </div>
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <span>选择附近店铺：</span>
-        <ul class="ScrollList">
-          <li v-for="(item, index) in StoreList" :key="index" class="flex-h" @click="SelectStore(item)">
-            <div class="flex-item">
-              <div>
-                <span>{{item.name}}</span>
-              </div>
+          </div>
+        </div>
+
+        <div class="Layer" v-if="ShowStore">
+          <div class="centerLabel">
+            <span v-if="RecommendStoreList.length">推荐店铺：</span>
+            <ul v-if="RecommendStoreList.length">
+              <li v-for="(item, index) in RecommendStoreList" :key="index" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <span>选择附近店铺：</span>
+            <ul class="ScrollList">
+              <li v-for="(item, index) in StoreList" :key="index" class="flex-h" @click="SelectStore(item)">
+                <div class="flex-item">
+                  <div>
+                    <span>{{item.name}}</span>
+                  </div>
+                </div>
+                <!-- <span>200m</span> -->
+                <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
+                <i class="iconfont iconyigouxuan active" v-else></i>
+              </li>
+            </ul>
+            <div class="Bottom flex-h">
+              <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
+              <a class="flex-item active" @click="ShowStore = false">确定</a>
             </div>
-            <!-- <span>200m</span> -->
-            <i class="iconfont iconweigouxuan" v-if="item.shopId !== CurrentStoreId"></i>
-            <i class="iconfont iconyigouxuan active" v-else></i>
-          </li>
-        </ul>
-        <div class="Bottom flex-h">
-          <a class="flex-item" @click="CurrentStoreId = null; CurrentStoreName = null; ShowStore = false">取消</a>
-          <a class="flex-item active" @click="ShowStore = false">确定</a>
+          </div>
         </div>
       </div>
-    </div>
+    </MainPageContainer>
   </div>
 </template>
 
 <script>
+import MainPageContainer from '../../../components/common/MainPageContainer'
 import { Switch } from 'vant'
 import GetAllParts from '../../../util/Sports'
 import GetPrice from '../../../util/FootballPrice'
-import { mapState, mapMutations, createNamespacedHelpers } from 'vuex'
+import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: '',
@@ -146,14 +151,10 @@ export default {
     })
   },
   components: {
-    'van-switch': Switch
+    'van-switch': Switch,
+    MainPageContainer
   },
   created () {
-    this.EditMainData([ // 配置页面框架数据
-      { name: 'ShowMainHeader', value: true },
-      { name: 'MainHeaderTitle', value: '足球' },
-      { name: 'ShowMainHeaderBack', value: true }
-    ])
     this.Init()
   },
   mounted () {
@@ -161,9 +162,6 @@ export default {
     })
   },
   methods: {
-    ...mapMutations([
-      'EditMainData' // 配置页面框架数据
-    ]),
     ...mapUserMutations([
       'DeleteZuQiuCart',
       'EmptyZuQiuCart'

src/pages/index/ZuQiuDingDan/page.scss

@@ -2,140 +2,148 @@
   background: #f8f8f8;
   position: relative;
   overflow: hidden;
-  > div {
-    &.flex-item {
-      position: relative;
-      overflow: hidden;
-      z-index: 1;
-      > div {
-        width: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        > ul {
-          padding: 0.15rem;
-          position: relative;
-          > li {
-            background: #fff;
-            position: relative;
-            overflow: visible;
+  width: 100%;
+  height: 100%;
+  .PageContainer {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    > div {
+      &.flex-item {
+        position: relative;
+        overflow: hidden;
+        z-index: 1;
+        > div {
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          > ul {
             padding: 0.15rem;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-            margin-top: 0.15rem;
-            border-radius: 0.06rem;
-            &:first-child {
-              margin-top: 0;
-            }
-            > .Close {
-              display: inline-block;
-              position: absolute;
-              right: 0;
-              top: 0;
-              font-size: 0.2rem;
-              color: #999;
-            }
-            > .Title {
-              align-items: center;
-              > span {
-                font-size: 0.12rem;
+            position: relative;
+            > li {
+              background: #fff;
+              position: relative;
+              overflow: visible;
+              padding: 0.15rem;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+              margin-top: 0.15rem;
+              border-radius: 0.06rem;
+              &:first-child {
+                margin-top: 0;
+              }
+              > .Close {
+                display: inline-block;
+                position: absolute;
+                right: 0;
+                top: 0;
+                font-size: 0.2rem;
                 color: #999;
-                line-height: 0.2rem;
               }
-              > div {
-                position: relative;
-                margin-left: 0.15rem;
+              > .Title {
+                align-items: center;
+                > span {
+                  font-size: 0.12rem;
+                  color: #999;
+                  line-height: 0.2rem;
+                }
                 > div {
-                  width: 100%;
                   position: relative;
-                  overflow: hidden;
-                  > span {
-                    display: block;
-                    white-space: nowrap;
-                    font-size: 0.12rem;
-                    line-height: 0.2rem;
+                  margin-left: 0.15rem;
+                  > div {
+                    width: 100%;
+                    position: relative;
                     overflow: hidden;
-                    text-overflow: ellipsis;
+                    > span {
+                      display: block;
+                      white-space: nowrap;
+                      font-size: 0.12rem;
+                      line-height: 0.2rem;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    }
                   }
                 }
               }
-            }
-            > .List {
-              font-size: 0;
-              > span {
-                display: inline-block;
-                vertical-align: middle;
-                font-size: 0.12rem;
-                line-height: 0.2rem;
-                margin-top: 0.05rem;
-                margin-right: 0.05rem;
-                color: #fff;
-                background: #ff5200;
-                padding: 0 0.1rem;
+              > .List {
+                font-size: 0;
+                > span {
+                  display: inline-block;
+                  vertical-align: middle;
+                  font-size: 0.12rem;
+                  line-height: 0.2rem;
+                  margin-top: 0.05rem;
+                  margin-right: 0.05rem;
+                  color: #fff;
+                  background: #ff5200;
+                  padding: 0 0.1rem;
+                }
               }
             }
           }
-        }
-        > .OtherTab {
-          padding: 0 0.15rem;
-          position: relative;
-          margin-bottom: 0.15rem;
-          > div {
-            background: #fff;
-            border-radius: 0.06rem;
-            box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+          > .OtherTab {
+            padding: 0 0.15rem;
+            position: relative;
+            margin-bottom: 0.15rem;
             > div {
-              padding: 0.15rem;
-              border-top: 0.01rem solid #f7f7f7;
-              align-items: center;
-              &:first-child {
-                border-top: none;
-              }
-              > span {
-                &:nth-child(1) {
-                  font-size: 0.15rem;
-                  color: #666;
-                  line-height: 0.2rem;
+              background: #fff;
+              border-radius: 0.06rem;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+              > div {
+                padding: 0.15rem;
+                border-top: 0.01rem solid #f7f7f7;
+                align-items: center;
+                &:first-child {
+                  border-top: none;
                 }
-                &:nth-child(2) {
-                  display: inline-block;
-                  margin-left: 0.1rem;
-                  position: relative;
-                  overflow: hidden;
-                  border: 0.01rem solid #f7f7f7;
-                  border-radius: 0.03rem;
-                  font-size: 0;
-                  white-space: nowrap;
-                  > * {
-                    display: inline-block;
-                    vertical-align: middle;
-                    font-size: 0.14rem;
-                    color: #999;
+                > span {
+                  &:nth-child(1) {
+                    font-size: 0.15rem;
+                    color: #666;
                     line-height: 0.2rem;
-                    border-left: 0.01rem solid #f7f7f7;
-                    &:first-child {
-                      border: none;
-                      border-right: 0.01rem solid #f7f7f7;
-                    }
-                  }
-                  > a {
-                    width: 0.2rem;
-                    text-align: center;
                   }
-                  > input {
-                    border: none;
-                    width: 0.35rem;
-                    text-align: center;
-                    color: #333;
-                    &:disabled {
+                  &:nth-child(2) {
+                    display: inline-block;
+                    margin-left: 0.1rem;
+                    position: relative;
+                    overflow: hidden;
+                    border: 0.01rem solid #f7f7f7;
+                    border-radius: 0.03rem;
+                    font-size: 0;
+                    white-space: nowrap;
+                    > * {
+                      display: inline-block;
+                      vertical-align: middle;
+                      font-size: 0.14rem;
+                      color: #999;
+                      line-height: 0.2rem;
+                      border-left: 0.01rem solid #f7f7f7;
+                      &:first-child {
+                        border: none;
+                        border-right: 0.01rem solid #f7f7f7;
+                      }
+                    }
+                    > a {
+                      width: 0.2rem;
+                      text-align: center;
+                    }
+                    > input {
+                      border: none;
+                      width: 0.35rem;
+                      text-align: center;
                       color: #333;
+                      &:disabled {
+                        color: #333;
+                      }
+                    }
+                    > span {
+                      border: none;
+                      margin-right: 0.03rem;
                     }
-                  }
-                  > span {
-                    border: none;
-                    margin-right: 0.03rem;
                   }
                 }
               }
@@ -143,178 +151,178 @@
           }
         }
       }
-    }
-    &.Bottom {
-      background: #fff;
-      position: relative;
-      overflow: hidden;
-      box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
-      z-index: 2;
-      padding: 0.15rem;
-      padding-bottom: 0.2rem;
-      > .Store {
-        font-size: 0;
-        text-align: center;
-        > a {
-          display: inline-block;
-          font-size: 0.14rem;
-          color: #333;
-          line-height: 0.2rem;
-          max-width: 100%;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-      }
-      > .Chuan {
-        margin: 0.1rem 0;
-        > span {
-          font-size: 0.14rem;
-          line-height: 0.2rem;
-          display: block;
-          white-space: nowrap;
-          overflow: hidden;
+      &.Bottom {
+        background: #fff;
+        position: relative;
+        overflow: hidden;
+        box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+        z-index: 2;
+        padding: 0.15rem;
+        padding-bottom: 0.2rem;
+        > .Store {
+          font-size: 0;
           text-align: center;
-          text-overflow: ellipsis;
-        }
-      }
-      > .Count {
-        font-size: 0;
-        text-align: center;
-        white-space: nowrap;
-        margin-top: 0.05rem;
-        > span {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 0.12rem;
-          color: #333;
-          line-height: 0.2rem;
-          margin-left: 0.1rem;
-          &:first-child {
-            margin-left: 0;
-          }
-          > em {
-            color: #d91d36;
-            font-size: 0.12rem;
+          > a {
+            display: inline-block;
+            font-size: 0.14rem;
+            color: #333;
             line-height: 0.2rem;
-            font-weight: bold;
+            max-width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
           }
         }
-      }
-      > a {
-        display: block;
-        text-align: center;
-        font-size: 0.16rem;
-        line-height: 0.42rem;
-        background: #ccc;
-        border-radius: 0.06rem;
-        color: #fff;
-        margin-top: 0.1rem;
-        &.active {
-          background: #ff5200;
-        }
-      }
-    }
-    &.Layer {
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      z-index: 10;
-      background: rgba(0, 0, 0, 0.7);
-      > div {
-        width: 80%;
-        background: #fff;
-        border-radius: 0.06rem;
-        position: relative;
-        overflow: hidden;
-        padding-top: 0.15rem;
-        > span {
-          font-size: 0.14rem;
-          font-weight: bold;
-          color: #000;
-          line-height: 0.3rem;
-          display: block;
-          text-indent: 0.15rem;
+        > .Chuan {
+          margin: 0.1rem 0;
+          > span {
+            font-size: 0.14rem;
+            line-height: 0.2rem;
+            display: block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-align: center;
+            text-overflow: ellipsis;
+          }
         }
-        > nav {
+        > .Count {
           font-size: 0;
-          padding: 0 0.15rem;
-          > a {
+          text-align: center;
+          white-space: nowrap;
+          margin-top: 0.05rem;
+          > span {
             display: inline-block;
+            vertical-align: middle;
             font-size: 0.12rem;
-            color: #666;
-            border: 0.01rem solid #666;
-            border-radius: 0.03rem;
+            color: #333;
             line-height: 0.2rem;
-            padding: 0 0.15rem;
-            margin-bottom: 0.1rem;
-            margin-right: 0.1rem;
-            &.active {
-              color: #fff;
-              background: #ff5200;
-              border-color: #ff5200;
+            margin-left: 0.1rem;
+            &:first-child {
+              margin-left: 0;
+            }
+            > em {
+              color: #d91d36;
+              font-size: 0.12rem;
+              line-height: 0.2rem;
+              font-weight: bold;
             }
           }
         }
-        > ul {
-          padding: 0 0.15rem;
+        > a {
+          display: block;
+          text-align: center;
+          font-size: 0.16rem;
+          line-height: 0.42rem;
+          background: #ccc;
+          border-radius: 0.06rem;
+          color: #fff;
+          margin-top: 0.1rem;
+          &.active {
+            background: #ff5200;
+          }
+        }
+      }
+      &.Layer {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 10;
+        background: rgba(0, 0, 0, 0.7);
+        > div {
+          width: 80%;
+          background: #fff;
+          border-radius: 0.06rem;
           position: relative;
           overflow: hidden;
-          &.ScrollList {
-            max-height: 2.5rem;
-            overflow-y: scroll;
-            -webkit-overflow-scrolling: touch;
+          padding-top: 0.15rem;
+          > span {
+            font-size: 0.14rem;
+            font-weight: bold;
+            color: #000;
+            line-height: 0.3rem;
+            display: block;
+            text-indent: 0.15rem;
           }
-          > li {
-            align-items: center;
-            border-top: 0.01rem solid #f7f7f7;
-            &:first-child {
-              border: none;
+          > nav {
+            font-size: 0;
+            padding: 0 0.15rem;
+            > a {
+              display: inline-block;
+              font-size: 0.12rem;
+              color: #666;
+              border: 0.01rem solid #666;
+              border-radius: 0.03rem;
+              line-height: 0.2rem;
+              padding: 0 0.15rem;
+              margin-bottom: 0.1rem;
+              margin-right: 0.1rem;
+              &.active {
+                color: #fff;
+                background: #ff5200;
+                border-color: #ff5200;
+              }
             }
-            > div {
-              position: relative;
+          }
+          > ul {
+            padding: 0 0.15rem;
+            position: relative;
+            overflow: hidden;
+            &.ScrollList {
+              max-height: 2.5rem;
+              overflow-y: scroll;
+              -webkit-overflow-scrolling: touch;
+            }
+            > li {
+              align-items: center;
+              border-top: 0.01rem solid #f7f7f7;
+              &:first-child {
+                border: none;
+              }
               > div {
-                width: 100%;
                 position: relative;
-                > span {
-                  display: block;
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  font-size: 0.14rem;
-                  color: #333;
-                  line-height: 0.42rem;
+                > div {
+                  width: 100%;
+                  position: relative;
+                  > span {
+                    display: block;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-size: 0.14rem;
+                    color: #333;
+                    line-height: 0.42rem;
+                  }
+                }
+              }
+              > span {
+                font-size: 0.14rem;
+                color: #999;
+                margin-right: 0.1rem;
+              }
+              > i {
+                font-size: 0.2rem;
+                color: #999;
+                &.active {
+                  color: #ff5200;
                 }
               }
             }
-            > span {
-              font-size: 0.14rem;
-              color: #999;
-              margin-right: 0.1rem;
-            }
-            > i {
-              font-size: 0.2rem;
-              color: #999;
+          }
+          > .Bottom {
+            border-top: 0.01rem solid #f7f7f7;
+            > a {
+              font-size: 0.16rem;
+              line-height: 0.42rem;
+              text-align: center;
+              border-left: 0.01rem solid #f7f7f7;
               &.active {
                 color: #ff5200;
               }
-            }
-          }
-        }
-        > .Bottom {
-          border-top: 0.01rem solid #f7f7f7;
-          > a {
-            font-size: 0.16rem;
-            line-height: 0.42rem;
-            text-align: center;
-            border-left: 0.01rem solid #f7f7f7;
-            &.active {
-              color: #ff5200;
-            }
-            &:first-child {
-              border: none;
+              &:first-child {
+                border: none;
+              }
             }
           }
         }