首页、规则、我的、兑奖记录、去投注、返回

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "mint-ui": "^2.2.13",
     "qs": "^6.5.2",
     "vue": "^2.5.16",
     "vue-router": "^3.0.1",

public/base.js

@@ -0,0 +1,20 @@
+// (function (doc, win) {
+//   var docEl = doc.documentElement,
+//     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+//     recalc = function () {
+//       var clientWidth = docEl.clientWidth;
+//       clientWidth = clientWidth >= 750 ? 750 : clientWidth;
+//       clientWidth = clientWidth <= 320 ? 320 : clientWidth;
+//       if (!clientWidth) return;
+//       docEl.style.fontSize = 10 * (clientWidth / 375) + 'px';
+//     };
+//     recalc();
+//   if (!doc.addEventListener) return;
+//   win.addEventListener(resizeEvt, recalc, false);
+//   doc.addEventListener('DOMContentLoaded', recalc, false);
+// })(document, window);
+var html = document.querySelector('html')
+html.style.fontSize = html.offsetWidth / 7.5 + 'px'
+addEventListener('resize', function () {
+  html.style.fontSize = html.offsetWidth / 7.5 + 'px'
+}, false)

public/index.html

@@ -8,6 +8,7 @@
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title>hooli世界杯</title>
   <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>normalize.css" />
+  <!-- <script src="<%= BASE_URL %>base.js"></script> -->
   <script src="<%= BASE_URL %>flexible.min.js"></script>
 </head>
 

src/main.js

@@ -2,6 +2,9 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+// 引入全部组件
+import Mint from 'mint-ui'
+Vue.use(Mint)
 
 Vue.config.productionTip = false
 

src/router.js

@@ -11,6 +11,14 @@ const routes = [{
   path: '/my',
   name: 'My',
   component: resolve => require(['./views/My'], resolve)
+}, {
+  path: '/exchangeRecord',
+  name: 'exchangeRecord',
+  component: resolve => require(['./views/exchangeRecord'], resolve)
+}, {
+  path: '/betBtn',
+  name: 'betBtn',
+  component: resolve => require(['./views/betBtn'], resolve)
 }, {
   path: '/index/:tabActive',
   name: 'Index',

src/views/Home.vue

@@ -1,7 +1,15 @@
 <template>
     <div class="home">
-        <div class="btn" @click="goMy">我的</div>
-        <div class="btn" @click="goIndex">开始竞猜</div>
+        <div class="wrap">
+            <i class="rule_ico" @click="showRule"/>
+            <div v-show="show" class="layer_box" @click="layer2" />
+            <div v-show="show" class="layer_box2" @click="layer2" />
+            <i class="my_ico" @click="goMy"/>
+            <i class="two_dimensional_code"/>
+            <i class="guessing_btn" @click="goIndex"/>
+            <!-- <div class="btn" @click="goMy">我的</div> -->
+            <!-- <div class="btn" @click="goIndex">开始竞猜</div> -->
+        </div>
     </div>
 </template>
 
@@ -10,8 +18,11 @@ export default {
   name: 'home',
   data () {
     return {
-
+      show: false
     }
+  },
+  created: function () {
+
   },
   methods: {
     goMy () {
@@ -23,8 +34,28 @@ export default {
       this.$router.push({
         path: '/index/matches'
       })
+    },
+    showRule () {
+      this.show = true
+    },
+    layer2 () {
+      this.show = false
+    },
+    loadGameInfo: function () {
+      // let params = {}
+      // params.url = ''
+      // params.method = 'get'
+      // params.data = {
+      //   id: ''
+      // }
+      // net.req(params).then((res)=>{
+
+      // },(e)=>{
+
+      // })
     }
   }
+
 }
 </script>
 
@@ -32,7 +63,75 @@ export default {
 .home {
   width: 100%;
   height: 100%;
-  background-color: red;
+  // background-color: red;
+}
+.wrap {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background:url(../assets/home/home_bg.png) no-repeat center center;
+  background-size: 100% 100%;
+}
+.wrap .rule_ico {
+  width: 0.83333333rem;
+  height: 0.81481481rem;
+  background: url(../assets/home/rule.png) no-repeat center center;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 0.6388888rem;
+  right: 0.7777777rem;
+  cursor: pointer;
+}
+.wrap .my_ico {
+  width: 0.83333333rem;
+  height: 0.84259259rem;
+  background: url(../assets/home/my.png) no-repeat center center;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 1.67592593rem;
+  right: 0.7777777rem;
+  cursor: pointer;
+}
+.wrap .two_dimensional_code {
+    width: 7.5462963rem;
+    height: 2.86111111rem;
+    background: url(../assets/home/two_dimensional_code.png) no-repeat center center;
+    background-size: cover;
+    position: absolute;
+    bottom: 0.58148148rem;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.wrap .guessing_btn {
+  width: 3rem;
+  height: 1.2222222rem;
+  background: url(../assets/home/guessing_btn.png) no-repeat center center;
+  background-size: cover;
+  position: absolute;
+  bottom: 3.51851852rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.layer_box {
+  width: 8.56481481rem;
+  height: 10.2962963rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -4.28240741rem;
+  margin-top: -5.14814815rem;
+  // background-color: #fff;
+  z-index: 11;
+  background: url(../assets/home/layer_img.png) repeat-y center center;
+    background-size: 100% 100%;
+}
+.layer_box2 {
+  width: 100%;
+  height: 100%;
+  background: url(../assets/home/layer_gray_tier.png) repeat-y center center;
+  background-size: 100% 100%;
+  position: absolute;
+  z-index: 10;
 }
 .btn {
   display: flex;

src/views/My.vue

@@ -1,12 +1,48 @@
 <template>
     <div class="my">
-        My
+        <i class="detail_ico"/>
+        <div class="my_content">
+            <p class="gold_numb">金币总数：{{ goldNumber }}</p>
+            <p class="share_introduce">分享可额外获得金币</p>
+            <p class="presenter_number">今日剩余赠送次数：{{ presenterNumber }}</p>
+            <i class="exchange_record" @click="exchangeRecord"/>
+            <i class="share_btn" @click="shareBtn"/>
+            <i class="bet_btn" @click="betBtn"/>
+        </div>
+        <i class="back_btn" @click="backBtn"/>
     </div>
 </template>
 
 <script>
 export default {
-  name: 'my'
+  name: 'my',
+  data () {
+    return {
+      goldNumber: 22222,
+      presenterNumber: 3
+    }
+  },
+  methods: {
+    backBtn () {
+      this.$router.push({
+        path: '/index'
+      })
+    },
+    exchangeRecord () {
+      this.$router.push({
+        path: '/exchangeRecord'
+      })
+    },
+    betBtn () {
+      this.$router.push({
+        path: '/betBtn'
+      })
+    },
+    // 分享   判断如果是浏览器打开的页面，就不显示分享，APP和微信打开的都要显示 分享
+    shareBtn () {
+
+    }
+  }
 }
 </script>
 
@@ -14,6 +50,79 @@ export default {
 .my {
   width: 100%;
   height: 100%;
-  background-color: green;
+  background: url(../assets/home/my_bg.png) no-repeat center center;
+  background-size: 100% 100%;
+}
+.my .detail_ico {
+  background: url(../assets/home/detail_ico.png) no-repeat center center;
+  background-size: cover;
+  width: 1.23148148rem;
+  height: 1.25rem;
+  position: absolute;
+  top: 0.35703704rem;
+  right: 1rem;
+}
+.my .my_content {
+  margin: auto;
+  padding-top: 3.09259259rem;
+}
+.my .my_content .gold_numb {
+  font-weight: bold;
+  font-size: 0.75925926rem;
+  line-height: 0.75925926rem;
+  color: #FFDF00;
+  letter-spacing: 0.055555556rem;
+  text-align: center;
+}
+.my .my_content .share_introduce {
+  margin-top: 0.25rem;
+  font-size: 0.59259259rem;
+  line-height: 0.59259259rem;
+  text-align: center;
+  color: #FFDF00;
+  letter-spacing: 0.045555556rem;
+}
+.my .my_content .presenter_number {
+  margin-top: 0.8rem;
+  color: #FFFFFF;
+  line-height: 0.41666666rem;
+  font-size: 0.41666666rem;
+  text-align: center;
+}
+.my .my_content .exchange_record {
+  display: block;
+  margin: auto;
+  margin-top: 1rem;
+  width: 4.03703703rem;
+  height: 1.25925925rem;
+  background: url(../assets/home/exchange_record.png) no-repeat center center;
+  background-size: cover;
+}
+.my .my_content .share_btn {
+  display: block;
+  margin: auto;
+  margin-top: 0.3rem;
+  width: 4.03703703rem;
+  height: 1.25925925rem;
+  background: url(../assets/home/share_btn.png) no-repeat center center;
+  background-size: cover;
+}
+.my .my_content .bet_btn {
+  display: block;
+  margin: auto;
+  margin-top: 0.3rem;
+  width: 4.03703703rem;
+  height: 1.25925925rem;
+  background: url(../assets/home/bet_btn.png) no-repeat center center;
+  background-size: cover;
+}
+.my .back_btn {
+  display: block;
+  margin: auto;
+  margin-top: 2.2rem;
+  width: 3.07407407rem;
+  height: 1.222222222rem;
+  background: url(../assets/home/back_btn.png) no-repeat center center;
+  background-size: cover;
 }
 </style>

src/views/betBtn.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="betBtn">{{ aa }}</div>
+</template>
+<script>
+export default {
+  name: 'betBtn',
+  data () {
+    return {
+      aa: '33333'
+    }
+  }
+}
+</script>
+<style scoped>
+.betBtn {
+    background-color: red;
+    color: #ffffff;
+}
+</style>

src/views/exchangeRecord.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="exchange_record">{{ aa }}</div>
+</template>
+<script>
+export default {
+  name: 'exchangeRecord',
+  data () {
+    return {
+      aa: '1222222222'
+    }
+  }
+}
+</script>
+<style scoped>
+.exchange_record {
+    background-color: red;
+    color: #ffffff;
+}
+</style>