0615

src/App.vue

@@ -1,12 +1,31 @@
 <template>
     <div id="app">
         <router-view />
+        <!-- 登录弹框 -->
+        <!-- <mt-popup
+            v-model="popupVisible"
+            popup-transition="popup-fade"
+            modal="true"
+            close-on-click-modal="true">
+            <div class="login_popup">dlfkjaldkjf</div>
+
+        </mt-popup> -->
     </div>
 </template>
 
 <script>
+// import loginPopup from './views/loginPopup'
+
 export default {
-  name: 'app'
+  name: 'app',
+  components: {
+    // loginPopup
+  },
+  data () {
+    return {
+      popupVisible: false
+    }
+  }
 }
 </script>
 
@@ -51,4 +70,50 @@ img:not([src]) {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+.center{
+    /*给父级元素加，子元素如果是个图片就会自动上下左右居中*/
+        display: -webkit-box;
+        display: box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+        -moz-box-align: center;
+        -webkit-box-pack: center;
+        -moz-box-pack: center;
+        box-align: center;
+        box-pack: center;
+        align-items: center;
+        -webkit-align-items: center;
+        justify-content: center;
+        -webkit-justify-content: center;
+    }
+/*字体超出隐藏*/
+.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+.ellipsis_two{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.ellipsis_three{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
+
+.flexbox {
+    display: -webkit-box;
+    display: box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.flex1 {
+    display: block;
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+}
+.flex2 {
+    display: block;
+    -webkit-box-flex: 2;
+    -moz-box-flex: 2;
+    -webkit-flex: 2;
+    flex: 2;
+}
+
 </style>

src/components/Matches.vue

@@ -1,10 +1,33 @@
 <template>
     <div class="matches">
-        Matches
+        <ul>
+            <li>
+                <div class="match_hd">
+                    <img v-bind:src="xFinals" alt="">
+                    <span>{{ time }}</span>
+                    <span>{{ matchState }}</span>
+                </div>
+                <div class="match_ct">
+                    <div class="match_ct_left">
+                        <img :src="contryLeft" alt="">
+                        <p>{{ contryLeftName }}</p>
+                    </div>
+                    <div class="match_ct_center">
+                        <p>{{ contryLeftNmb }}:{{ contryRightNmb }} </p>
+                    </div>
+                    <div class="match_ct_right">
+                        <img :src="contryRight" alt="">
+                        <p>{{ contryRightName }}</p>
+                    </div>
+                </div>
+
+            </li>
+        </ul>
     </div>
 </template>
 
 <script>
+import xFinals from '../assets/matches/eight_finals.png'
 export default {
   name: 'Matches'
 }

src/main.js

@@ -4,6 +4,7 @@ import router from './router'
 import store from './store'
 // 引入全部组件
 import Mint from 'mint-ui'
+import 'mint-ui/lib/style.css'
 Vue.use(Mint)
 
 Vue.config.productionTip = false

src/views/Index.vue

@@ -1,10 +1,12 @@
 <template>
     <div class="index">
         <ul class="tabs">
-            <li>赛事</li>
-            <li>排行榜</li>
-            <li>活动</li>
-            <li>兑换</li>
+            <li v-for="(item,index) in list" :key="index" class="center tabs_li1">
+                <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">
             <template v-if="'matches'===tabActive">
@@ -28,12 +30,34 @@ import Matches from '@/components/Matches'
 import Ranks from '@/components/Ranks'
 import News from '@/components/News'
 import Awards from '@/components/Awards'
+import metches from '@/assets/matches/metches_ico.png'
+import ranking from '@/assets/matches/ranking_ico.png'
+import activity from '@/assets/matches/activity_ico.png'
+import conversion from '@/assets/matches/conversion_ico.png'
 export default {
   name: 'index',
   components: {Matches, Ranks, News, Awards},
   data () {
     return {
-      tabActive: 'matches' /* matches,ranks,news,awards */
+      tabActive: 'matches', /* matches,ranks,news,awards */
+      list: [
+        {
+          url: metches,
+          name: '赛事'
+        },
+        {
+          url: ranking,
+          name: '排行榜'
+        },
+        {
+          url: activity,
+          name: '活动'
+        },
+        {
+          url: conversion,
+          name: '兑换'
+        }
+      ]
     }
   },
   created: function () {
@@ -53,10 +77,61 @@ export default {
   background-color: blue;
 }
 .tabs{
-  height: 2rem;
+  height: 2.03703703rem;
   display: flex;
   justify-content: space-between;
   align-items: stretch;
+  background-color: #FFFFFF;
+}
+.tabs .metches_ico {
+    margin: auto;
+    display: block;
+    width: 0.83333333rem;
+    height: 0.83333333rem;
+}
+.tabs .ranking_ico {
+    margin: auto;
+    display: block;
+    width: 1rem;
+    height: 0.83333333rem;
+}
+.tabs .activity_ico {
+    margin: auto;
+    display: block;
+    width: 0.83333333rem;
+    height: 0.83333333rem;
+}
+.tabs .conversion_ico {
+    margin: auto;
+    display: block;
+    width: 0.83333333rem;
+    height: 0.83333333rem;
+}
+.tabs>li {
+    flex: 1;
+    position: relative;
+}
+.tabs .tabs_li1{
+    background-color: #ccc;
+}
+.tabs .tabs_li2{
+    background-color: #666666;
+}
+.tabs .nav_li_box {
+    width: 1.9rem;
+    position: absolute;
+    top: 50%;
+    bottom: 0;
+    left: 50%;
+    right: 0;
+    transform: translate(-50%,-50%);
+}
+.tabs .nav_li_box p {
+    color: #42A021;
+    font-size: 0.370377037rem;
+    letter-spacing: 0.05rem;
+    margin-top: 0.12037037rem;
+    text-align: center;
 }
 .container {
   height: 6rem;

src/views/My.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="my">
-        <i class="detail_ico"/>
+        <i class="detail_ico" @click="detailList"/>
         <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="share_btn" @click=""/> -->
             <i class="bet_btn" @click="betBtn"/>
         </div>
         <i class="back_btn" @click="backBtn"/>
@@ -14,6 +14,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'my',
   data () {
@@ -39,7 +40,10 @@ export default {
       })
     },
     // 分享   判断如果是浏览器打开的页面，就不显示分享，APP和微信打开的都要显示 分享
-    shareBtn () {
+    // shareBtn () {
+
+    // },
+    detailList () {
 
     }
   }
@@ -47,7 +51,14 @@ export default {
 </script>
 
 <style scoped lang="less">
+.mint_center {
+  top: 50%;
+  left: 50%;
+  margin-left: -.5rem;
+  margin-top: -.5rem;
+}
 .my {
+  position: relative;
   width: 100%;
   height: 100%;
   background: url(../assets/home/my_bg.png) no-repeat center center;
@@ -124,5 +135,14 @@ export default {
   height: 1.222222222rem;
   background: url(../assets/home/back_btn.png) no-repeat center center;
   background-size: cover;
+  position: absolute;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.login_popup {
+  width: 1rem;
+  height: 1rem;
+  background-color: red;
 }
 </style>

src/views/baseNav.vue

@@ -0,0 +1 @@
+

src/views/exchangeRecord.vue

@@ -1,19 +1,198 @@
 <template>
-    <div class="exchange_record">{{ aa }}</div>
+    <div class="exchange_record">
+        <div class="record_hd">
+            <i class="record_hd_ico"/>
+        </div>
+        <div class="record_ct">
+            <div class="record_list_hd">
+                <span class="left">奖品名称</span>
+                <span class="right">消耗金币</span>
+            </div>
+            <ul class="record_list_ul">
+                <li v-for="(item,index) in list" :key="index" class="record_list_ct">
+                    <div class="record_list_ct_box clearfix">
+                        <span class="left">{{ item.name }}</span>
+                        <span class="right">{{ item.number}}</span>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <i class="back_btn" @click="backBtn"/>
+    </div>
 </template>
 <script>
 export default {
   name: 'exchangeRecord',
   data () {
     return {
-      aa: '1222222222'
+      record_hd: '1222222222',
+      list: [
+        {
+          name: 'hooli',
+          number: '2222'
+        },
+        {
+          name: 'hooli',
+          number: '333'
+        },
+        {
+          name: 'hooli',
+          number: '4444'
+        },
+        {
+          name: 'hooli',
+          number: '5555'
+        },
+        {
+          name: 'hooli',
+          number: '666'
+        },
+        {
+          name: 'hooli',
+          number: '333'
+        },
+        {
+          name: 'hooli',
+          number: '4444'
+        },
+        {
+          name: 'hooli',
+          number: '5555'
+        },
+        {
+          name: 'hooli',
+          number: '666'
+        }
+      ]
+    }
+  },
+  methods: {
+    backBtn () {
+      this.$router.push({path: '/My'})
     }
   }
 }
 </script>
 <style scoped>
+li {
+  list-style-type:none;
+}
 .exchange_record {
-    background-color: red;
-    color: #ffffff;
+  background: url(../assets/exchange_record/exchange_record_bg.png) no-repeat center center;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+}
+.record_hd {
+  padding-top: 1.71111111rem;
+}
+.record_hd_ico {
+  display: block;
+  margin: auto;
+  background: url(../assets/exchange_record/exchange_record_hd.png) no-repeat center center;
+  background-size: 100% 100%;
+  width: 9.033333333rem;
+  height: 1.1111111111111rem;
+}
+.record_ct {
+  width: 75%;
+  height: 49%;
+
+  position: absolute;
+  top: 21.4%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.record_list_hd {
+  width: 80%;
+  margin: auto;
+  margin-top: 0.44074074rem;
+  height: 1.2rem;
+  line-height: 1.2rem;
+  color: #FFDF00;
+  font-size: 0.55555555555rem;
+}
+.record_ct li {
+  height: 1.2rem;
+}
+.record_ct li .record_list_ct_box {
+  width: 80%;
+  margin: auto;
+  height: 1.2rem;
+  line-height: 1.2rem;
+  color: #FFFFFF;
+  font-size: 0.46296296rem;
+}
+.left {
+  /* float: left; */
+  width:50%;
+  display: inline-block;
+  text-align: center;
+}
+.right {
+  display: inline-block;
+  width:50%;
+  /* float:right; */
+  text-align: center;
+}
+.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;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.record_list_ul {
+  overflow-y: auto;
+  height: 84%;
+}
+/* .record_list_ul {
+  height:80%;
+}
+.record_list_hd {
+  height: 20%;
+  top: .4333rem;
+  width: 100%;
+  position: relative;
+}
+.record_list_hd span {
+  color: #FFDF00;
+  font-size: 0.55555555555rem;
+  display: inline-block;
+  text-align: center;
+
+}
+.record_list_ct{
+  height: 20%;
+  position: relative;
+  border-top: 3px solid #0C1D32;
+}
+.record_list_ct span {
+  color: #FFDF00;
+  font-size: 0.55555555555rem;
+  display: inline-block;
+  text-align: center;
+}
+.record_list_ct_box {
+  top: .333333rem;
+  width: 100%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.left {
+  float: left;
+  width:50%;
+  display: inline-block;
 }
+.right {
+  display: inline-block;
+  width:50%;
+  float: right;
+} */
 </style>

src/views/loginPopup.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="conceal_box">
+        <!-- <ul class="login_popup">
+            <li>
+                <p>{{ nickname }}</p>
+                <label><input type="text"></label>
+            </li>
+            <li>
+                <p>手机号：</p>
+                <label><input type="text"></label>
+            </li>
+            <li>
+                <p>验证码：</p>
+                <label><input type="text"></label>
+            </li>
+        </ul>
+        <i class="confirm_btn"/> -->
+        <mt-popup
+            v-model="popupVisible"
+            popup-transition="popup-fade"
+            modal="true"
+            close-on-click-modal="true">
+            <div class="login_popup">dlfkjaldkjf</div>
+
+        </mt-popup>
+    </div>
+</template>
+<script>
+export default {
+  name: 'loginPopup',
+  data () {
+    return {
+      nickname: '昵称：',
+      popupVisible: false
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+<style scoped>
+    .conceal_box {
+        width: 100%;
+        height: 100%;
+
+    }
+    .conceal_box .login_popup {
+        color: #000;
+    }
+</style>