first commit

index.html

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

src/pages/CaiMinGuanLi/ShouYe/index.vue

@@ -51,6 +51,10 @@ export default {
   },
   created () {
     this.EditMainData([ // 配置页面框架数据
+      { name: 'MainHeaderMoreIcon', value: '' },
+      { name: 'MainHeaderMoreText', value: '' },
+      { name: 'ShowMainHeaderMore', value: false },
+      { name: 'MainHeaderMoreClick', value: () => { } },
       { name: 'MainTitleClick', value: () => { } },
       { name: 'MainHeaderTextColor', value: '#fff' },
       { name: 'ShowMainTitleIcon', value: false },

src/pages/SignIn/ShouYe/index.vue

@@ -30,6 +30,10 @@ export default {
   },
   created () {
     this.EditMainData([ // 配置页面框架数据
+      { name: 'MainHeaderMoreIcon', value: '' },
+      { name: 'MainHeaderMoreText', value: '' },
+      { name: 'ShowMainHeaderMore', value: false },
+      { name: 'MainHeaderMoreClick', value: () => { } },
       { name: 'MainTitleClick', value: () => { } },
       { name: 'MainHeaderTextColor', value: '#fff' },
       { name: 'ShowMainTitleIcon', value: false },

src/pages/WoDe/ShouYe/index.vue

@@ -65,6 +65,10 @@ export default {
   },
   created () {
     this.EditMainData([ // 配置页面框架数据
+      { name: 'MainHeaderMoreIcon', value: '' },
+      { name: 'MainHeaderMoreText', value: '' },
+      { name: 'ShowMainHeaderMore', value: false },
+      { name: 'MainHeaderMoreClick', value: () => { } },
       { name: 'MainTitleClick', value: () => { } },
       { name: 'MainHeaderTextColor', value: '#fff' },
       { name: 'ShowMainTitleIcon', value: false },

src/pages/index.vue

@@ -9,6 +9,10 @@
         <span @click="MainTitleClick()">{{MainHeaderTitle}}</span>
         <a class="iconfont iconjiantoudown" @click="MainTitleClick()" v-if="ShowMainTitleIcon"></a>
       </span>
+      <a class="MainHeaderMore" v-if="ShowMainHeaderMore" @click="MainHeaderMoreClick">
+        <span>{{MainHeaderMoreText}}</span>
+        <i class="iconfont" :class="MainHeaderMoreIcon"></i>
+      </a>
     </div>
 
     <!-- 内容 -->
@@ -39,6 +43,10 @@ export default {
   },
   computed: {
     ...mapState({
+      ShowMainHeaderMore: x => x.ShowMainHeaderMore, // 显隐页面头部更多按钮
+      MainHeaderMoreText: x => x.MainHeaderMoreText, // 页面头部更多按钮文案
+      MainHeaderMoreIcon: x => x.MainHeaderMoreIcon, // 页面头部更多按钮图标
+      MainHeaderMoreClick: x => x.MainHeaderMoreClick, // 页面头部更多按钮点击事件
       MainTitleClick: x => x.MainTitleClick, // 页面标题点击事件
       ShowMainTitleIcon: x => x.ShowMainTitleIcon, // 显隐页面标题箭头图标
       ShowMainHeaderBack: x => x.ShowMainHeaderBack, // 显隐头部返回按钮

src/pages/index/DingDanChaXun/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="Page">
+
+    <!-- 内容 -->
+    <div class="Content">
+      <scroller :on-refresh="Refresh">
+        <div class="Container">
+          <ul>
+            <li v-for="(item, index) in 15" :key="index">
+
+            </li>
+          </ul>
+        </div>
+      </scroller>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+export default {
+  name: 'index',
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.EditMainData([ // 配置页面框架数据
+      { name: 'MainHeaderMoreIcon', value: '' },
+      { name: 'MainHeaderMoreText', value: '' },
+      { name: 'ShowMainHeaderMore', value: false },
+      { name: 'MainHeaderMoreClick', value: () => { } },
+      { name: 'MainTitleClick', value: () => { } },
+      { name: 'MainHeaderTextColor', value: '#fff' },
+      { name: 'ShowMainTitleIcon', value: false },
+      { name: 'ShowMainHeader', value: true },
+      { name: 'ShowMainTabBar', value: false },
+      { name: 'MainHeaderTitle', value: '订单查询' },
+      { name: 'MainTabBarActiveId', value: null },
+      { name: 'ShowMainHeaderBack', value: true }
+    ])
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'EditMainData' // 配置页面框架数据
+    ]),
+    Refresh (done) { // 页面下拉刷新
+      window.setTimeout(() => {
+        done()
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/index/DingDanChaXun/page.scss

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

src/pages/index/ShouYe/index.vue

@@ -68,6 +68,10 @@ export default {
   },
   created () {
     this.EditMainData([ // 配置页面框架数据
+      { name: 'MainHeaderMoreIcon', value: 'icondaojishi' },
+      { name: 'MainHeaderMoreText', value: '全部彩种' },
+      { name: 'ShowMainHeaderMore', value: true },
+      { name: 'MainHeaderMoreClick', value: () => { this.$router.push({ name: 'DingDanChaXun' }) } },
       { name: 'MainTitleClick', value: () => { } },
       { name: 'MainHeaderTextColor', value: '#fff' },
       { name: 'ShowMainTitleIcon', value: false },

src/pages/page.scss

@@ -6,12 +6,12 @@
   > .MainHeaderPadding {
     position: relative;
     overflow: hidden;
-    background: #D91D36;
+    background: #d91d36;
   }
   > .MainHeader {
     position: relative;
     overflow: hidden;
-    background: #D91D36;
+    background: #d91d36;
     > .MainTitle {
       width: 100%;
       display: block;
@@ -39,6 +39,31 @@
         top: 0;
         left: 0.15rem;
       }
+      &.MainHeaderMore {
+        right: 0.15rem;
+        top: 0;
+        font-size: 0;
+        white-space: nowrap;
+        > span {
+          font-size: 0.12rem;
+          line-height: 0.4rem;
+          display: inline-block;
+          vertical-align: middle;
+          color: #fff;
+        }
+        > i {
+          font-size: 0.16rem;
+          line-height: 0.22rem;
+          display: inline-block;
+          vertical-align: middle;
+          color: #fff;
+          width: 0.22rem;
+          text-align: center;
+          background: rgba(255, 255, 255, 0.3);
+          border-radius: 100%;
+          margin-left: 0.05rem;
+        }
+      }
     }
   }
   > .TabBar {
@@ -52,7 +77,7 @@
         padding: 0.05rem 0;
         &.active {
           > * {
-            color: #D91D36;
+            color: #d91d36;
           }
         }
         > * {

src/router/index.js

@@ -21,6 +21,11 @@ let router = new Router({
             path: '/index/ShouYe', // 彩单管理
             name: 'CaiDanGuanLi',
             component: resolve => (require(['@/pages/index/ShouYe'], resolve))
+          },
+          {
+            path: '/index/DingDanChaXun', // 订单查询
+            name: 'DingDanChaXun',
+            component: resolve => (require(['@/pages/index/DingDanChaXun'], resolve))
           }
         ]
       },

src/store/index.js

@@ -6,6 +6,10 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
   state: {
+    MainHeaderMoreClick: () => {}, // 页面头部更多按钮点击事件
+    ShowMainHeaderMore: false, // 显隐页面头部更多按钮
+    MainHeaderMoreText: '', // 页面头部更多按钮文案
+    MainHeaderMoreIcon: '', // 页面头部更多按钮图标
     MainTitleClick: () => {}, // 页面标题点击事件
     ShowMainTitleIcon: false, // 显隐页面标题箭头图标
     ShowMainHeaderBack: true, // 显隐头部返回按钮