准备测试另一种rem写法

public/base.js

@@ -13,8 +13,42 @@
 //   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)
+
+// 100
+// 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)
+
+// 自定义
+(function () {
+  var meta = document.createElement('meta')
+  meta.setAttribute('name', 'viewport')
+  var devicePixelRatio = window.devicePixelRatio
+  var dpr = devicePixelRatio ? (1 / devicePixelRatio) : 1
+  if (window.screen.availWidth == document.documentElement.offsetWidth && !document.querySelector('meta[name="viewport"]')) {
+    dpr = 1
+    devicePixelRatio = 1
+  }
+  if (document.querySelector('meta[name="viewport"]')) {
+    meta = document.querySelector('meta[name="viewport"]')
+  }
+  document.documentElement.setAttribute('data-dpr', devicePixelRatio || 1)
+  if (window.navigator.userAgent.match(/android/i)) {
+    meta.setAttribute('content', 'width=device-width, initial-scale=' + dpr + ', maximum-scale=' + dpr + ', minimum-scale=' + dpr + ', user-scalable=no')
+  } else {
+    meta.setAttribute('content', 'initial-scale=' + dpr + ', maximum-scale=' + dpr + ', minimum-scale=' + dpr + ', user-scalable=no')
+  }
+  document.head.appendChild(meta)
+
+  var recalc = function () {
+    var width = document.documentElement.offsetWidth
+    var fontSize = 100 / 1242 * width
+    document.querySelector('html').style.fontSize = (fontSize) + 'px'
+  }
+
+  window.addEventListener('resize', recalc, false)
+  document.addEventListener('DOMContentLoaded', recalc, false)
+  recalc()
+})()

src/components/Awards.vue

@@ -1,12 +1,67 @@
 <template>
     <div class="awards">
-        Awards
+        <p class="residue_gold">剩余金币：</p>
+        <div class="list">
+            <div class="list_hd">
+                <span>奖品</span>
+                <span>所需金币</span>
+            </div>
+            <ul class="list_ct">
+                <li>
+                    <span class="list_ct_name">hooli</span>
+                    <span class="list_ct_gold">2500</span>
+                    <i class="awards_btn" />
+                </li>
+                <li>
+                    <span class="list_ct_name">hooli</span>
+                    <span class="list_ct_gold">2500</span>
+                    <i class="awards_btn1" @click="awardsBtn"/>
+                </li>
+            </ul>
+        </div>
+        <i class="back_btn" @click="backBtn"/>
+        <div v-show="popup" class="conceal_tier"/>
+        <div v-show="popup" class="address">
+            <ul>
+                <li>
+                    <p>姓名：</p>
+                    <input class="user_name" type="text">
+                </li>
+                <li>
+                    <p>电话：</p>
+                    <input class="user_phone" type="text">
+                </li>
+                <li>
+                    <p>详细地址：</p>
+                    <textarea  id="" class="user_address" name="" cols="30" rows="5"/>
+                </li>
+            </ul>
+            <i class="submit" @click="submit"/>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-  name: 'Awards'
+  name: 'Awards',
+  data () {
+    return {
+      popup: false
+    }
+  },
+  methods: {
+    submit () {
+
+    },
+    awardsBtn () {
+      this.popup = true
+    },
+    backBtn () {
+      this.$router.push({
+        path: '/Home'
+      })
+    }
+  }
 }
 </script>
 
@@ -14,6 +69,152 @@ export default {
 .awards {
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background: url(../assets/awards/awards_bg.png) no-repeat center center;
+  background-size: 100% 100%;
+  position: relative;
+}
+.residue_gold {
+  padding-top: 1.1rem;
+  margin-left: .75rem;
+  color: #FFFFFF;
+  font-size: 0.64814814rem;
+  letter-spacing: .02rem;
+  font-weight: bold;
+}
+.list {
+  width: 96%;
+  margin: auto;
+  height: 50%;
+  background: url(../assets/awards/grafting_bg.png) repeat-y center center;
+  background-size: cover;
+}
+.list_hd {
+  margin-top: .46296296rem;
+  height: 1rem;
+  line-height: 1rem;
+  background: url(../assets/awards/awards_hd_bg.png) no-repeat center center;
+  background-size: cover;
+  font-weight: bold;
+}
+.list_hd span {
+  display: inline-block;
+  text-align: center;
+  font-size: .55555555rem;
+}
+.list_hd span:first-child {
+  width: 41%;
+  color: #000000;
+}
+.list_hd span:last-child {
+  width: 59%;
+  color: #FFFFFF;
+}
+.list_ct {
+  padding-top: .3rem;
+  height: 84%;
+  overflow-y: auto;
+}
+.list_ct li {
+  width: 94%;
+  margin: auto;
+  border-bottom: .028rem solid #1D3656;
+  box-sizing: border-box;
+  height: 1.58333333rem;
+  line-height: 1.58333333rem;
+  position: relative;
+}
+.list_ct li span {
+  display:inline-block;
+  // width: 35%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: .55555555555rem;
+}
+.list_ct li .list_ct_name {
+  width: 45%
+}
+.list_ct li .list_ct_gold {
+  width: 55%;
+}
+.list_ct li i {
+  width: 1.6666666rem;
+  height: .86111111rem;
+  position: absolute;
+  top: 25%;
+  right: 0;
+}
+.awards_btn {
+  background: url(../assets/awards/gray_awards_btn.png) no-repeat center center;
+  background-size: cover;
+}
+.awards_btn1 {
+  background: url(../assets/awards/red_awards_btn.png) no-repeat center center;
+  background-size: cover;
+}
+.back_btn {
+    display: block;
+    margin: auto;
+    width: 3.07407407rem;
+    height: 1.222222222rem;
+    background: url(../assets/home/back_btn.png) no-repeat center center;
+    background-size: cover;
+    position: absolute;
+    margin-top: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+}
+// 弹框
+.conceal_tier {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    // background-color: #000000;
+    background: url(../assets/ranks/rank_bg1.png) no-repeat center center;
+    background-size: cover;
+    // opacity: .7;
+    z-index: 10001;
+}
+.address {
+  position: absolute;
+  width: 63%;
+  z-index: 9999999;
+  top: 8%;
+  left: 18.5%;
+  color: #FFFFFF;
+  font-size: .5555555rem;
+}
+.user_address,.user_phone,.user_name {
+  width: 100%;
+}
+.user_phone,.user_name {
+  background: url(../assets/cash_address/input.png) no-repeat center center;
+  background-size: 102% 115%;
+  padding-left: 1%;
+  border-radius: .09259259rem;
+  box-sizing: border-box;
+  margin-top: .34259259rem;
+  margin-bottom: 1rem;
+}
+.user_address {
+  background: url(../assets/cash_address/textarea.png) no-repeat center center;
+  background-size: 102% 115%;
+  border-radius: .09259259rem;
+  box-sizing: border-box;
+  margin-top: .34259259rem;
+}
+.submit {
+    display: block;
+    margin: auto;
+    width: 3.07407407rem;
+    height: 1.222222222rem;
+    background: url(../assets/cash_address/submit.png) no-repeat center center;
+    background-size: 100% 100%;
+    position: absolute;
+    margin-top: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    // border-radius: .1rem;
 }
 </style>

src/components/Matches.vue

@@ -3,7 +3,7 @@
         <ul>
             <li v-for="(item,index) in list" v-if="item.over" :key="index" class="matches_item">
                 <div class="match_hd clearfix">
-                    <img v-bind:src="item.xFinals" class="xFinals left" alt="">
+                    <img :src="item.xFinals" class="xFinals left" alt="">
                     <span class="match_time">{{ item.time }}</span>
                     <span class="right matach_state">{{ item.matchState }}</span>
                 </div>
@@ -135,6 +135,8 @@ export default {
       ]
     }
   },
+  mounted () {
+  },
   methods: {
     backBtn1 () {
       this.$router.push({path: '/Home'})

src/components/News.vue

@@ -1,19 +1,75 @@
 <template>
     <div class="news">
-        News
+        <ul>
+            <li v-for="(item,index) in list" :key="index"/>
+        </ul>
+        <i class="back_btn" @click="backBtn"/>
     </div>
 </template>
 
 <script>
+// import model1 from '@/assets/home/share_btn.png'
+// import model2 from '@/assets/home/exchange_record.png'
 export default {
-  name: 'News'
+  name: 'News',
+  data () {
+    return {
+      list: [
+        {
+          url: '@/assets/home/share_btn.png'
+        },
+        {
+          url: '@/assets/home/exchange_record.png'
+        }
+      ]
+    }
+  },
+  methods: {
+    backBtn () {
+      this.$router.push({
+        path: '/Home'
+      })
+    }
+  }
 }
 </script>
 
 <style scoped lang="less">
-.news {
-  width: 100%;
-  height: 100%;
-  background-color: #ddd;
+    .news {
+    width: 100%;
+    height: 100%;
+    background: url(../assets/ranks/rank_bg1.png) no-repeat center center;
+    background-size: 100% 100%;
+    overflow: hidden;
+    }
+    .news ul {
+    width: 96%;
+    margin: auto;
+    margin-top: 0.49074074rem;
+    }
+    .news ul li {
+    width: 100%;
+    height: 3.8rem;
+    margin-top: .3rem;
+    background-color: #FFFFFF;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    // margin-top: .5rem;
+    }
+   .news ul li:first-child {
+     margin-top: 0;
+   }
+   .back_btn {
+    display: block;
+    margin: auto;
+    width: 3.07407407rem;
+    height: 1.222222222rem;
+    background: url(../assets/home/back_btn.png) no-repeat center center;
+    background-size: cover;
+    position: absolute;
+    margin-top: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
 }
 </style>

src/components/Ranks.vue

@@ -1,12 +1,69 @@
 <template>
     <div class="ranks">
-        Ranks
+        <div class="ct">
+            <div class="ct_hd">
+                <span class="ct_bd_rank">排名</span>
+                <span class="ct_bd_phone">手机号</span>
+                <span class="ct_bd_goldNmb">金币数</span>
+            </div>
+            <ul class="rank_list">
+                <li v-for="(item,index) in list" :key="index">
+                    <span class="ct_bd_rank">{{item.rank}}</span>
+                    <span class="ct_bd_phone">{{item.phone}}</span>
+                    <span class="ct_bd_goldNmb">{{item.goldNmb}}枚</span>
+                </li>
+            </ul>
+            <i class="back_btn" @click="backBtn"/>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-  name: 'Ranks'
+  name: 'Ranks',
+  data () {
+    return {
+      list: [
+        {
+          rank: '1',
+          phone: '132XXXX8765',
+          goldNmb: '5'
+        },
+        {
+          rank: '2',
+          phone: '132XXXX8765',
+          goldNmb: '50'
+        },
+        {
+          rank: '3',
+          phone: '132XXXX8765',
+          goldNmb: '15'
+        },
+        {
+          rank: '1',
+          phone: '132XXXX8765',
+          goldNmb: '5'
+        },
+        {
+          rank: '2',
+          phone: '132XXXX8765',
+          goldNmb: '50'
+        },
+        {
+          rank: '3',
+          phone: '132XXXX8765',
+          goldNmb: '15'
+        }
+      ]
+    }
+  },
+  methods: {
+    backBtn () {
+      this.$router.push({
+        path: '/Home'
+      })
+    }
+  }
 }
 </script>
 
@@ -14,6 +71,72 @@ export default {
 .ranks {
   width: 100%;
   height: 100%;
-  background-color: #bbb;
+  background: url(../assets/ranks/rank_bg1.png) no-repeat center center;
+  background-size: 100% 100%;
+  position: relative;
+  overflow: hidden;
+}
+.ct {
+  width: 94%;
+  height: 10rem;
+  background: url(../assets/ranks/rank_bg2.png) no-repeat center center;
+  background-size: 100% 100%;
+  margin-left: 3%;
+  margin-top: 1.28703703rem;
+}
+.ranks span {
+  color: #FFFFFF;
+  font-size: 0.46296296rem;
+  height: .8rem;
+  line-height: .8rem;
+  display: inline-block;
+  text-align: center;
+}
+.ct_bd_rank {
+  width: 28%;
+
+}
+.ct_bd_phone {
+  width: 42%;
+
+}
+.ct_bd_goldNmb {
+  width: 30%;
+}
+.rank_list li {
+  width: 96%;
+  height: 1.9rem;
+  line-height: 1.9rem;
+  margin: auto;
+  border-bottom: 0.046rem solid #171A1F;
+}
+.rank_list {
+  margin-top: .5rem;
+  height: 83%;
+  overflow-y: auto;
+}
+.rank_list li .ct_bd_rank {
+  width: 25%;
+
+}
+.rank_list li .ct_bd_phone {
+  width: 47%;
+
+}
+.rank_list li .ct_bd_goldNmb {
+  width: 28%;
+
+}
+.back_btn {
+    display: block;
+    margin: auto;
+    width: 3.07407407rem;
+    height: 1.222222222rem;
+    background: url(../assets/home/back_btn.png) no-repeat center center;
+    background-size: cover;
+    position: absolute;
+    margin-top: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
 }
 </style>

src/views/Home.vue

@@ -32,7 +32,7 @@ export default {
     },
     goIndex () {
       this.$router.push({
-        path: '/index/ranks'
+        path: '/index/matches'
       })
     },
     showRule () {

src/views/Index.vue

@@ -1,11 +1,13 @@
 <template>
     <div class="index">
         <ul class="tabs">
-            <li v-for="(item,index) in list" :key="index" class="center tabs_li1">
+            <li v-for="(item,index) in list" :key="index" :class="{active :item.link == tabActive}" class="center tabs_li1" @click="tabEvent(item.link)">
+
                 <div class="nav_li_box">
                     <img v-bind:src="item.url" class="metches_ico" alt="">
                     <p>{{item.name}}</p>
                 </div>
+
             </li>
         </ul>
         <div class="container">
@@ -43,18 +45,22 @@ export default {
       list: [
         {
           url: metches,
+          link: 'matches',
           name: '赛事'
         },
         {
           url: ranking,
+          link: 'ranks',
           name: '排行榜'
         },
         {
           url: activity,
+          link: 'news',
           name: '活动'
         },
         {
           url: conversion,
+          link: 'awards',
           name: '兑换'
         }
       ]
@@ -63,8 +69,15 @@ export default {
   created: function () {
     let {tabActive} = this.$route.params
     this.tabActive = tabActive
+    // console.log(this.tabActive === 'metches')
   },
   methods: {
+    tabEvent (link) {
+      this.tabActive = link
+      this.$router.push({
+        path: '/index/' + link
+      })
+    }
 
   }
 }
@@ -111,7 +124,7 @@ export default {
     position: relative;
 }
 .tabs .tabs_li1{
-    background-color: #ccc;
+    background-color: #FFFFFF;
 }
 .tabs .tabs_li2{
     background-color: #666666;
@@ -134,6 +147,9 @@ export default {
     font-weight: bold;
 }
 .container {
-  height: 6rem;
+  height: 100%;
+}
+.tabs li.active {
+    background-color: #E5E5E5;
 }
 </style>

src/views/guess.vue

@@ -56,12 +56,13 @@
                 <span>{{goldNmb}}</span>
             </div>
             <div class="select_gold clearfix">
-                <span v-for="(item,index) in list" :key="index" class="left">{{item.number}}</span>
-                <!-- <span class="left">10</span>
-                <span class="left">20</span>
-                <span class="left">30</span>
-                <span class="left">50</span>
-                <span class="left">100</span> -->
+                <!-- <span v-for="(item,index) in list" :key="index" class="left">{{item.number}}</span> -->
+                <span class="left write">5</span>
+                <span class="left normal">10</span>
+                <span class="left normal">20</span>
+                <span class="left normal">30</span>
+                <span class="left pitch_on">50</span>
+                <span class="left normal">100</span>
             </div>
             <div class="select_btn clearfix">
                 <span class="yes_btn left" @click="yesBtn"/>
@@ -341,7 +342,7 @@ export default {
     .bet_popup_gold {
         text-align: center;
         padding-top: 0.46296296rem;
-
+        color: #192D0C;
     }
     .bet_popup_gold span:first-child {
         display: inline-block;
@@ -361,14 +362,39 @@ export default {
         margin-left: 5%;
         width: 30%;
         height: 0.97222222rem;
+        color: #192710;
         margin-top: .3rem;
         text-align: center;
         line-height: 0.972222222rem;
-        background-color: blue;
+        background-color: #FFFFFF;
+        font-size: 0.50925925rem
     }
     .select_gold span:nth-child(3n+1) {
         margin-left: 0;
     }
+    .select_gold span.write {
+        width: 30%;
+        height: 0.97222222rem;
+        /* -moz-box-shadow: 10px 10px 5px #888888;
+        -webkit-box-shadow: 10px 10px 5px #888888;
+        -o-box-shadow: 10px 10px 5px #888888;
+        box-shadow: 10px 10px 5px #888888; */
+        color: #CDCBCB;
+        background: url(../assets/guess/no_pitch_on.png) no-repeat center center;
+        background-size: 100% 100%;
+    }
+    .select_gold span.normal {
+        width: 30%;
+        height: 0.97222222rem;
+        background: url(../assets/guess/normal.png) no-repeat center center;
+        background-size: 100% 100%;
+    }
+    .select_gold span.pitch_on {
+        width: 30%;
+        height: 0.97222222rem;
+        background: url(../assets/guess/pitch_on.png) no-repeat center center;
+        background-size: 100% 100%;
+    }
     .select_btn {
         width: 100%;
         height: 1.15rem;