Merge branch 'master' of http://svn.ouj.com:3000/kangheitan/migrate-webgame-vue

app/src/components/boutiqueGame/style.scss

@@ -48,21 +48,6 @@
             transition: all 0.2s;
         }
     }
-    .more {
-        font-size: 12px;
-        color: $note-text-color;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        &:after {
-            content: '';
-            display: inline-block;
-            width: 7px;
-            height: 12px;
-            margin-left: 3px;
-            background: url(./img/arrow.png) no-repeat center 0/100%;
-        }
-    }
     .b-g-info-item {
         padding: 0 20px;
         box-sizing: border-box;
@@ -93,6 +78,9 @@
             align-items: center;
             font-size: 14px;
             cursor: pointer;
+            &:hover {
+                color: $main-active-color;
+            }
             img {
                 width: 32px;
                 height: 32px;

app/src/components/gameListPop/index.vue

@@ -2,12 +2,18 @@
     <div class="game-list">
         <ul class="content-wrap">
             <li v-for="item in 20" :key="item" class="content-item">
-                <img src="" alt="" class="img">
+                <img src="http://fed.webdev.ouj.com/80x80" alt="" class="img">
                 <div class="detail-info">
                     <p class="name">大圣轮回111111</p>
-                    <rate :score="3"></rate>
+                    <rate :score="3.1"></rate>
                     <span class="desc">炫酷战斗，极致体炫酷战斗，极致体</span>
-                    <p class="main-box">官网</p>
+                    <div class="bottom">
+                        <p class="main-box">官网</p>
+                        <div class="entry-newserve">
+                            <div class="text">进新服</div>
+                            <i class="icon"></i>
+                        </div>
+                    </div>
                 </div>
             </li>
         </ul>
@@ -18,7 +24,11 @@ import Vue from 'vue'
 import rate from '@/duowan-ui/rate/index.js'
 Vue.use(rate)
 export default {
+    data() {
+        return {
 
+        }
+    }
 }
 
 

app/src/components/gameListPop/style.scss

@@ -7,14 +7,23 @@
         display: flex;
         flex-wrap: wrap;
         align-items: center;
-        margin: 48px 0 0 39px;
+        margin: 31px 0 0 29px;
     }
     .content-item {
         display: flex;
         align-items: center;
         justify-content: center;
-        margin: 0 39px 47px 0;
+        margin: 0 10px 23px 0;
+        padding: 10px 18px 14px 10px;
+        border: 1px solid #fff;
+        border-radius: 4px;
         cursor: pointer;
+        &:hover {
+            border: 1px solid #dedede;
+            .entry-newserve {
+                display: flex !important;
+            }
+        }
         .img {
             width: 80px;
             height: 80px;
@@ -39,6 +48,11 @@
                 font-size: 12px;
                 padding: 8px 0 10px;
             }
+            .bottom {
+                display: flex;
+                align-items: center;
+                position: relative;
+            }
             .main-box {
                 width: 28px;
                 height: 15px;
@@ -49,6 +63,35 @@
                 color: #fff;
                 text-align: center;
             }
+            .entry-newserve {
+                width: 86px;
+                height: 26px;
+                background: $main-active-color;
+                border-radius: 3px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 0 8px;
+                box-sizing: border-box;
+                display: none;
+                position: absolute;
+                right: -10px;
+                top: -3px;
+                .text {
+                    height: 26px;
+                    line-height: 26px;
+                    font-size: 14px;
+                    color: #fff;
+                    border-right: 1px solid rgba(255, 255, 255, 0.4);
+                    padding-right: 8px;
+                }
+                .icon {
+                    display: inline-block;
+                    width: 13px;
+                    height: 13px;
+                    background: url(./img/icon-serve.png) no-repeat center/100%;
+                }
+            }
         }
     }
 }

app/src/components/listNav/index.vue

@@ -1,82 +1,93 @@
 <template>
-    <div>
-        <ul>    
-            <li :class="[{'active':type=='openService'}]" @click="changeNav('openService')"><i class="icon icon-hot"></i>热门游戏</li>
-            <li :class="[{'active':type=='rank'}]" @click="changeNav('rank')"><i class="icon icon-serve"></i>开服动态</li>
-            <li><i class="icon icon-rank"></i>排行榜</li>
-            <li><i class="icon icon-all"></i>全部游戏</li>
-            <li><i class="icon icon-chess"></i>趣味棋牌</li>
-            <li><i class="icon icon-role"></i>角色扮演</li>
-            <li><i class="icon icon-sports"></i>休闲竞技</li>
-            <li><i class="icon icon-warfare"></i>战争策略</li>
-            <li><i class="icon icon-simulate"></i>模拟经营</li>
-            <li><i class="icon icon-legend"></i>传奇游戏</li>
-            <li><i class="icon icon-try"></i>新游试玩</li>
-            <li><i class="icon icon-kongfu"></i>武侠</li>
-            <li><i class="icon icon-magic"></i>魔幻</li>
-            <li><i class="icon icon-myth"></i>神话</li>
-            <li><i class="icon icon-history"></i>历史</li>
-            <li><i class="icon icon-knight"></i>仙侠</li>
-            <li><i class="icon icon-compete"></i>竞技</li>
-            <li><i class="icon icon-cartoon"></i>漫画</li>
-        </ul>
-    </div>
+  <div>
+    <ul>
+      <li :class="[{'active':type==item.to}]" v-for="(item,index) in nav" :key="index" @click="changeNav(index)">
+        <i :class="`icon icon-${index}`"></i>
+        {{item.name}}
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
 export default {
-    data(){
-        return {
-        }
-    },
-    methods:{
-        changeNav(type){
-            this.$router.replace(`/list/${type}`)
-        }
-    },
-    computed:{
-        type(){
-            return this.$route.params.type
-        }
+  data() {
+    return {
+      nav: {
+        hot: { name: "热门游戏", to: "popular" },
+        serve: { name: "开服动态", to: "openService" },
+        rank: { name: "排行榜", to: "rank" },
+        all: { name: "全部游戏", to: "allGame" },
+        chess: { name: "趣味棋牌", to: "allGame/chess" },
+        role: { name: "角色扮演", to: "allGame/role" },
+        sports: { name: "休闲竞技", to: "allGame/sports" },
+        warfare: { name: "战争策略", to: "allGame/warfare" },
+        simulate: { name: "模拟经营", to: "allGame/simulate" },
+        legend: { name: "传奇游戏", to: "allGame/legend" },
+        try: { name: "新游试玩", to: "allGame/try" },
+        kongfu: { name: "武侠", to: "allGame/kongfu" },
+        magic: { name: "魔幻", to: "allGame/magic" },
+        myth: { name: "神话", to: "allGame/myth" },
+        history: { name: "历史", to: "allGame/history" },
+        knight: { name: "仙侠", to: "allGame/knight" },
+        compete: { name: "竞技", to: "allGame/compete" },
+        cartoon: { name: "漫画", to: "allGame/cartoon" }
+      }
+    };
+  },
+  methods: {
+    changeNav(type) {
+      this.$router.replace(`/list/${this.nav[type].to}`);
     }
-}
+  },
+  computed: {
+    type() {
+      return this.$route.path.replace('/list/','');
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-$types:'hot','serve','rank','all','chess','role','sports','warfare','simulate','legend','knight','try','kongfu','myth','magic','history','compete','cartoon';
+$types: "hot", "serve", "rank", "all", "chess", "role", "sports", "warfare",
+  "simulate", "legend", "knight", "try", "kongfu", "myth", "magic", "history",
+  "compete", "cartoon";
 
-li{
-    height: 34px;
-    line-height: 34px;
-    font-size: 14px;
-    color: #333333;
-    padding-left: 27px;
-    cursor: pointer;
-    border-left: 3px solid transparent;
-    transition: all .2s;
-    margin-bottom: 6px;
-    &:hover,&.active{
-        background-color: #fff3f3;
-        border-color: #eb4c4c;
-        color: #eb4c4c;
-        @for $i from 1 through length($types) {
-            .icon-#{nth($types, $i)} {
-                background: url('./img/icon-#{nth($types, $i)}_active.png') center no-repeat;
-            }
-        }
+li {
+  height: 34px;
+  line-height: 34px;
+  font-size: 14px;
+  color: #333333;
+  padding-left: 27px;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  transition: all 0.2s;
+  margin-bottom: 6px;
+  &:hover,
+  &.active {
+    background-color: #fff3f3;
+    border-color: #eb4c4c;
+    color: #eb4c4c;
+    @for $i from 1 through length($types) {
+      .icon-#{nth($types, $i)} {
+        background: url("./img/icon-#{nth($types, $i)}_active.png")
+          center
+          no-repeat;
+      }
     }
+  }
 }
-.icon{
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    vertical-align: middle;
-    margin-right: 12px;
+.icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  margin-right: 12px;
 }
 
 @for $i from 1 through length($types) {
-.icon-#{nth($types, $i)} {
-    background: url('./img/icon-#{nth($types, $i)}.png') center no-repeat;
- }
+  .icon-#{nth($types, $i)} {
+    background: url("./img/icon-#{nth($types, $i)}.png") center no-repeat;
+  }
 }
 </style>

app/src/components/loading/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <transition>
+    <div class="loading" v-show="show">
+      <div class="loading-mask"></div>
+      <div class="loading-content">
+        <i class="icon-loading"></i>
+        <p class="loading-tip">加载中，请稍候...</p>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "pubLoading",
+  props: {
+    show: Boolean
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.loading {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+  .loading-mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+  .loading-content {
+    text-align: center;
+  }
+  .icon-loading {
+    display: inline-block;
+    width: 73px;
+    height: 71px;
+    background-repeat: no-repeat;
+    background-image: url(./img/pub_loading.png);
+    animation: pub-loading 3.2s steps(1, start) infinite;
+  }
+
+  .loading-tip {
+    margin-top: 20px;
+    font-size: 12px;
+    color: #666666;
+  }
+}
+
+@keyframes pub-loading {
+  0%,
+  100% {
+    background-position: -227px -2px;
+  }
+
+  25% {
+    background-position: -152px -2px;
+  }
+
+  50% {
+    background-position: -77px -2px;
+  }
+
+  75% {
+    background-position: -2px -2px;
+  }
+}
+</style>

app/src/components/payPopup/base.vue

@@ -0,0 +1,107 @@
+<template>
+  <transition name="fade">
+    <div class="pay-popup">
+      <div class="popup-mask" @click="onMaskClick"></div>
+      <div
+        class="popup-main"
+        :style="{marginLeft:width && `-${width / 2}px`,marginTop:height && `-${height / 2}px`}"
+      >
+        <header class="hd">
+          <i class="popup-icon">{{title}}</i>
+          <i class="close" title="关闭" @click="$emit('close',$event)">×</i>
+        </header>
+        <section class="bd">
+          <slot></slot>
+        </section>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+    maskClose: {
+      type: Boolean,
+      default: false
+    },
+    width: Number,
+    height: Number
+  },
+  computed: {},
+
+  mounted() {},
+
+  methods: {
+    onMaskClick(evt) {
+      if (this.maskClose) {
+        this.$emit("close", evt);
+      }
+    }
+  }
+};
+</script>
+<style lang='scss' scoped>
+.pay-popup {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  outline: none;
+  z-index: 10000;
+}
+.popup-mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba($color: #000000, $alpha: 0.6);
+}
+
+.popup-main {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: auto;
+  height: auto;
+  box-shadow: 0 0 6px 13px rgba($color: #000000, $alpha: 0.06);
+}
+
+.hd {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 10px;
+  border: 1px solid $border-color;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  background-color: #eeeeee;
+  overflow: hidden;
+}
+.bd {
+  border: 1px solid $border-color;
+  border-top: none;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  overflow: hidden;
+}
+.popup-icon {
+  display: block;
+  height: 17px;
+  padding-left: 20px;
+  background: url(./img/icon_pay.png) no-repeat left center;
+  font-size: 14px;
+  line-height: 17px;
+  color: #666;
+}
+.close {
+  display: block;
+  font-size: 24px;
+  color: #666;
+  cursor: pointer;
+}
+</style>

app/src/components/payPopup/check.vue

@@ -0,0 +1,49 @@
+<template>
+  <basePopup title="支付" :maskClose="true" :width="260" :height="210" @close="$emit('close',$event)">
+    <div class="check-main">
+      <i class="icon-order-check"></i>
+      <p class="tip">订单检测中，请稍候...</p>
+    </div>
+  </basePopup>
+</template>
+
+<script>
+import basePopup from "./base";
+export default {
+  components: {
+    basePopup
+  },
+  data() {
+    return {};
+  },
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {}
+};
+</script>
+<style lang='scss' scoped>
+.check-main {
+  box-sizing: border-box;
+  width: 260px;
+  height: 170px;
+  background-color: #fff;
+  overflow: hidden;
+}
+.icon-order-check {
+  display: block;
+  width: 100%;
+  height: 52px;
+  margin-top: 42px;
+  background: url(./img/icon_order_check.png) no-repeat center;
+}
+
+.tip {
+  margin-top: 25px;
+  text-align: center;
+  font-size: 12px;
+  color: #666666;
+}
+</style>

app/src/components/payPopup/confirm.vue

@@ -0,0 +1,108 @@
+<template>
+  <basePopup title="支付" :maskClose="true" :width="390" :height="350" @close="$emit('close',$event)">
+    <div class="confirm-main">
+      <h3>交易确认</h3>
+      <div class="money">
+        <div class="pay">
+          ¥
+          <em>10元</em>
+        </div>
+        <div class="get">
+          充值所得：
+          <em>100</em>元宝
+        </div>
+      </div>
+      <div class="info">
+        <p class="item">支付账号：达普拉</p>
+        <p class="item">支付方式：支付宝</p>
+        <p class="item">支付账号：达普拉</p>
+        <p class="item">支付方式：支付宝</p>
+      </div>
+      <div class="pay-confirm-btn">确认付款</div>
+      <p class="confirm-tip">适度娱乐 理性消费</p>
+    </div>
+  </basePopup>
+</template>
+
+<script>
+import basePopup from "./base";
+export default {
+  components: {
+    basePopup
+  },
+  data() {
+    return {};
+  },
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {}
+};
+</script>
+<style lang='scss' scoped>
+.confirm-main {
+  box-sizing: border-box;
+  width: 390px;
+  height: 310px;
+  padding: 0 24px;
+  background-color: #fff;
+  overflow: hidden;
+}
+h3 {
+  margin: 25px 0 40px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #666666;
+  line-height: 20px;
+}
+.money {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+.pay {
+  font-size: 12px;
+  color: #000;
+
+  em {
+    font-size: 20px;
+    color: $main-active-color;
+    font-weight: bold;
+  }
+}
+.get {
+  margin-left: 35px;
+  font-size: 12px;
+  color: #666666;
+
+  em {
+    color: $main-active-color;
+  }
+}
+
+.info{
+    padding-top: 6px;
+    margin-top: 26px;
+    border-top: 1px solid $border-color;
+    .item{
+        display: inline-block;
+        width: 50%;
+        margin-top: 12px;
+        font-size: 12px;
+        color: #999999;
+        text-indent: 1.2em;
+    }
+}
+.pay-confirm-btn{
+    margin-top: 25px;
+}
+
+.confirm-tip{
+    margin-top: 10px;
+    font-size: 12px;
+    color: #cdcdcd;
+    text-align: center;
+}
+</style>

app/src/components/payPopup/fail.vue

@@ -0,0 +1,66 @@
+<template>
+  <basePopup title="支付" :maskClose="true" :width="390" :height="350" @close="$emit('close',$event)">
+    <div class="fail-main">
+      <i class="icon-order"></i>
+      <h3>未检测到成功充值订单</h3>
+      <p class="tip">
+        支付遇到问题，请
+        <em>联系客服</em>
+      </p>
+      <div class="pay-reconfirm-btn">支付失败，重新支付</div>
+    </div>
+  </basePopup>
+</template>
+
+<script>
+import basePopup from "./base";
+export default {
+  components: {
+    basePopup
+  },
+  data() {
+    return {};
+  },
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {}
+};
+</script>
+<style lang='scss' scoped>
+.fail-main {
+  box-sizing: border-box;
+  width: 390px;
+  height: 310px;
+  background-color: #fff;
+  overflow: hidden;
+}
+.icon-order {
+  display: block;
+  width: 100%;
+  height: 59px;
+  margin-top: 39px;
+  background: url(./img/icon_order.png) no-repeat center;
+}
+h3 {
+  margin: 25px 0 18px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #666666;
+  text-align: center;
+}
+.tip {
+  text-align: center;
+  font-size: 12px;
+  color: #666666;
+  em {
+    color: $main-active-color;
+    cursor: pointer;
+  }
+}
+.pay-reconfirm-btn {
+  margin-top: 46px;
+}
+</style>

app/src/components/payPopup/succ.vue

@@ -0,0 +1,85 @@
+<template>
+  <basePopup title="支付" :maskClose="true" :width="390" :height="350" @close="$emit('close',$event)">
+    <div class="succ-main">
+      <i class="icon-succ"></i>
+      <h3>充值成功！</h3>
+      <div class="get">
+        充值所得：
+        <em>100</em>元宝
+      </div>
+      <div class="info">
+        <p class="item">支付账号：达普拉</p>
+        <p class="item">支付方式：支付宝</p>
+        <p class="item">支付账号：达普拉</p>
+        <p class="item">支付方式：支付宝</p>
+      </div>
+      <div class="pay-confirm-btn">确认付款</div>
+    </div>
+  </basePopup>
+</template>
+
+<script>
+import basePopup from "./base";
+export default {
+  components: {
+    basePopup
+  },
+  data() {
+    return {};
+  },
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {}
+};
+</script>
+<style lang='scss' scoped>
+.succ-main {
+  box-sizing: border-box;
+  width: 390px;
+  height: 310px;
+  padding: 30px 24px 0;
+  background-color: #fff;
+  overflow: hidden;
+}
+.icon-succ {
+  display: block;
+  width: 100%;
+  height: 56px;
+  background: url(./img/icon_succ.png) no-repeat center;
+}
+h3 {
+  margin: 15px 0 10px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #666666;
+  text-align: center;
+}
+.get {
+  text-align: center;
+  font-size: 12px;
+  color: #666666;
+  em {
+    color: $main-active-color;
+  }
+}
+
+.info {
+  padding-top: 6px;
+  margin-top: 15px;
+  border-top: 1px solid $border-color;
+  .item {
+    display: inline-block;
+    width: 50%;
+    margin-top: 12px;
+    font-size: 12px;
+    color: #999999;
+    text-indent: 1.2em;
+  }
+}
+.pay-confirm-btn {
+  margin-top: 25px;
+}
+</style>

app/src/components/payPopup/wait.vue

@@ -0,0 +1,74 @@
+<template>
+  <basePopup title="支付" :maskClose="true" :width="390" :height="390" @close="$emit('close',$event)">
+    <div class="wait-main">
+      <i class="icon-wait"></i>
+      <h3>等待支付...</h3>
+      <ul class="tip-list">
+        <li>请在新打开的页面完成支付</li>
+        <li>支付完成前请不要关闭此窗口</li>
+        <li>支付遇到问题，请联系客服</li>
+      </ul>
+      <div class="pay-confirm-btn">确认付款</div>
+      <div class="pay-reconfirm-btn">支付失败，重新支付</div>
+    </div>
+  </basePopup>
+</template>
+
+<script>
+import basePopup from "./base";
+export default {
+  components: {
+    basePopup
+  },
+  data() {
+    return {};
+  },
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {}
+};
+</script>
+<style lang='scss' scoped>
+.wait-main {
+  width: 390px;
+  height: 350px;
+  background-color: #fff;
+  overflow: hidden;
+}
+.icon-wait {
+  display: block;
+  width: 100%;
+  height: 47px;
+  margin-top: 40px;
+  background: url(./img/icon_wait.png) no-repeat center;
+}
+h3 {
+  margin: 20px 0 14px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  color: #666666;
+}
+.tip-list {
+  margin-left: 117px;
+  li {
+    font-size: 12px;
+    line-height: 2;
+    color: #999999;
+    &::before {
+      content: "·";
+      margin-right: 6px;
+    }
+  }
+}
+
+.pay-confirm-btn {
+  margin-top: 10px;
+}
+.pay-reconfirm-btn {
+  margin-top: 10px;
+}
+</style>

app/src/directive/index.js

@@ -0,0 +1,18 @@
+import LoadingCpt from "@/components/loading";
+
+export function PubLoading(Vue) {
+    const LoadingCtr = Vue.extend(LoadingCpt);
+    Vue.directive("pub-loading", {
+        bind(el, binding) {
+            let loadingDom = new LoadingCtr({
+                el: document.createElement("div")
+            });
+            loadingDom.show = binding.value;
+            el.appendChild(loadingDom.$el);
+            el.loadingDom = loadingDom;
+        },
+        update(el, binding) {
+            el.loadingDom.show = binding.value;
+        }
+    });
+}

app/src/duowan-ui/more/index.vue

@@ -29,9 +29,17 @@ export default {
         content: '';
         display: inline-block;
         width: 7px;
-        height: 12px;
-        margin-left: 3px;
-        background: url(./img/arrow.png) no-repeat center 0/100%;
+        height: 7px;
+        border-width: 1px 1px 0 0;
+        border-color: $note-text-color;
+        border-style: solid;
+        transform: rotate(45deg);
+    }
+    &:hover {
+        color: $main-active-color;
+        &:after {
+            border-color: $main-active-color;
+        }
     }
 }
 </style>

app/src/page/loading.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="page-loading">
-      <div class="loading-gif"></div>
-      <p class="loading-text">加载中，请稍候...</p>
-      <p class="loading-tips">加载太慢？请清一下缓存试试？或者，先随机玩下<em title="其他游戏">其它游戏</em></p>
+    <div class="loading-gif"></div>
+    <p class="loading-text">加载中，请稍候...</p>
+    <p class="loading-tips">
+      加载太慢？请清一下缓存试试？或者，先随机玩下
+      <em title="其他游戏">其它游戏</em>
+    </p>
   </div>
 </template>
 
 <script>
 export default {
+  components: {},
   data() {
     return {};
   },
@@ -17,54 +21,55 @@ export default {
 };
 </script>
 <style lang='scss' scoped>
-.page-loading{
-    width: 100%;
-    height: 100%;
-    background-color: #141414;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+.page-loading {
+  width: 100%;
+  height: 100%;
+  background-color: #141414;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
-.loading-gif{
-    width: 113px;
-    height: 109px;
-    background-repeat: no-repeat;
-    background-image: url(~@/assets/loading.png);
-    animation: loading 3.2s steps(1,start) infinite;
+.loading-gif {
+  width: 113px;
+  height: 109px;
+  background-repeat: no-repeat;
+  background-image: url(~@/assets/game_loading.png);
+  animation: game-loading 3.2s steps(1, start) infinite;
 }
-.loading-text{
-    font-size: 14px;
-    color: #ffffff;
-    margin: 26px 0 12px 0;
+.loading-text {
+  font-size: 14px;
+  color: #ffffff;
+  margin: 26px 0 12px 0;
 }
 
-.loading-tips{
-    font-size: 12px;
-    color: #666666;
+.loading-tips {
+  font-size: 12px;
+  color: #666666;
 
-    em{
-        text-decoration: underline;
-        color: $main-active-color;
-        cursor: pointer;
-    }
+  em {
+    text-decoration: underline;
+    color: $main-active-color;
+    cursor: pointer;
+  }
 }
 
-@keyframes loading {
-    0%,100%{
-        background-position: -347px -2px;
-    }
+@keyframes game-loading {
+  0%,
+  100% {
+    background-position: -347px -2px;
+  }
 
-    25%{
-        background-position: -232px -2px;
-    }
+  25% {
+    background-position: -232px -2px;
+  }
 
-    50%{
-        background-position: -117px -2px;
-    }
+  50% {
+    background-position: -117px -2px;
+  }
 
-    75%{
-        background-position: -2px -2px;
-    }
+  75% {
+    background-position: -2px -2px;
+  }
 }
 </style>

app/src/page/popup/hallNews.vue

@@ -314,7 +314,7 @@ export default {
       width: 8px;
       height: 12px;
       padding: 0 7px;
-      background: url(~@/assets/icon-pagination-#{$icon}.png) center no-repeat;
+      background: url(./img/icon_pagination_#{$icon}.png) center no-repeat;
       vertical-align: middle;
       margin-top: -0.22em;
       cursor: pointer;

app/src/page/popup/pay.vue

@@ -0,0 +1,531 @@
+<template>
+  <div class="p-wrap">
+    <div class="f-form">
+      <div class="f-row">
+        <label>账号：</label>
+        <p>
+          <span class="tab">YY</span> 打普拉
+        </p>
+      </div>
+      <div class="f-row">
+        <label>游戏/区服/角色：</label>
+        <div class="f-select-wrap">
+          <div :class="['f-select',{'current':gameSelect[0]}]" @click.stop>
+            <button class="sel-btn" @click.stop="toggleSelect(0)">神仙劫</button>
+            <div class="sel-cont">
+              <div class="cont-fl pub-scrollbar">
+                <ul>
+                  <li class="active">最近玩过</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                </ul>
+              </div>
+              <div class="cont-fr pub-scrollbar">
+                <ul>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄英雄联盟英雄联盟联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div :class="['f-select','ext-serve',{'current':gameSelect[1]}]" @click.stop>
+            <button class="sel-btn" @click="toggleSelect(1)">双线1103</button>
+            <div class="sel-cont">
+              <div class="cont-fl pub-scrollbar">
+                <ul>
+                  <li class="active">最近玩过</li>
+                  <li>YY-1103-4122</li>
+                  <li>YY-1251-2541</li>
+                  <li>YY-254_2541</li>
+                  <li>YY-397_5683</li>
+                  <li>YY-1103-4122</li>
+                  <li>YY-1251-2541</li>
+                  <li>YY-254_2541</li>
+                  <li>YY-397_5683</li>
+                  <li>YY-1103-4122</li>
+                  <li>YY-1251-2541</li>
+                  <li>YY-254_2541</li>
+                  <li>YY-397_5683</li>
+                  <li>YY-1103-4122</li>
+                  <li>YY-1251-2541</li>
+                  <li>YY-254_2541</li>
+                  <li>YY-397_5683</li>
+                </ul>
+              </div>
+              <div class="cont-fr pub-scrollbar">
+                <ul>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div :class="['f-select','ext-role',{'current':gameSelect[2]}]" @click.stop>
+            <button class="sel-btn" @click="toggleSelect(2)">郎估素</button>
+            <div class="sel-cont">
+              <div class="cont-fr pub-scrollbar">
+                <ul>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                  <li>英雄联盟</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="f-line"></div>
+      <div class="f-row">
+        <label>支付方式：</label>
+        <div class="f-radio-wrap">
+          <button class="f-radio ext-pay checked">微信/支付宝扫码</button>
+        </div>
+      </div>
+      <div class="f-row">
+        <label>充值金额：</label>
+        <div class="f-radio-wrap">
+          <button class="f-radio checked">50元</button>
+          <button class="f-radio">100元</button>
+          <button class="f-radio">300元</button>
+          <button class="f-radio">500元</button>
+          <button class="f-radio">1000元</button>
+          <button class="f-radio">5000元</button>
+          <p><input type="text" placeholder="其它金额"> 元 <span>（10-200000之间整数）</span></p>
+        </div>
+      </div>
+      <div class="f-row ext-text">
+        <label>可获得：</label>
+        <p>
+          <em>500</em> 元宝
+          <span>(兑换比例1：10，10元=100元宝)</span>
+        </p>
+      </div>
+      <div class="f-row ext-text">
+        <label>优惠返利：</label>
+        <span>暂元可用优惠券</span>
+      </div>
+      <div class="f-row ext-text">
+        <label>实付金额：</label>
+        <p>
+          ￥
+          <em>50</em>
+        </p>
+      </div>
+      <div class="pay">
+        <div class="pay-fl">
+          <div class="qrcode">
+            <img src="http://img4.dwstatic.com/www/1612/345565676951/1481610503125.jpg" alt>
+          </div>
+          <p>微信/支付宝扫描完成支付</p>
+        </div>
+        <div class="pay-fr">
+          <div>
+            手机不在身边？
+            <br>登录电脑版支付宝
+          </div>
+          <a href="#">登录账号付款</a>
+        </div>
+      </div>
+      <div class="f-checkbox">
+        <label><input type="checkbox" checked> 我已阅读</label><a href="#" target="_blank">《多玩充值服务协议》</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "pay",
+  data(){
+    return {
+      gameSelect:[false,false,false] //游戏/区服/角色下拉框
+    }
+  },
+  methods:{
+    toggleSelect(index){
+      for(let i=0;i<3;i++){
+        if(i==index) this.$set(this.gameSelect,i,!this.gameSelect[i])
+        else this.$set(this.gameSelect,i,false)
+      }
+    }
+  },
+  mounted(){
+    document.addEventListener('click',this.toggleSelect)
+  },
+  destroyed(){
+    document.removeEventListener('click',this.toggleSelect)
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.f-form {
+  padding: 30px 30px 0;
+}
+.f-line {
+  border-top: 1px solid $borderColor;
+  margin: 18px 0;
+}
+.f-row {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+  color: #333333;
+  font-size: 12px;
+  &.ext-text{
+    margin: 16px 0;
+  }
+  label {
+    display: block;
+    font-size: 14px;
+    width: 116px;
+    text-align: right;
+    margin-right: 6px;
+  }
+  span {
+    color: #999999;
+  }
+  em {
+    font-size: 24px;
+    color: $mainColor;
+  }
+  .tab {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 2px 8px;
+    color: #fff;
+    background: $mainColor;
+    border-radius: 2px;
+  }
+}
+.f-radio-wrap {
+  display: flex;
+  input{
+    border: 1px solid $borderColor;
+    height: 24px;
+    width: 80px;
+    outline: none;
+    padding: 0 10px;
+  }
+}
+.f-select-wrap {
+  display: flex;
+}
+.f-select {
+  position: relative;
+  z-index: 1;
+  &.ext-serve{
+    .cont-fl{
+      width: 134px;
+    }
+  }
+  &.ext-role{
+    .sel-cont{
+      width: 104px;
+      padding-top: 0;
+    }
+    .cont-fr{
+      ul{
+        display: block;
+      }
+      li{
+        width: auto;
+        padding-left: 10px;
+      }
+    }
+  }
+  &.current{
+    z-index: 2;
+    .sel-btn{
+      border-color: $mainColor;
+      border-bottom-color: #FFF;
+      &::before{
+        border-color: $mainColor;
+      }
+    }
+    .sel-cont{
+      display: flex;
+    }
+  }
+  .sel-btn {
+    position: relative;
+    z-index: 3;
+    color: #333333;
+    border: 1px solid $borderColor;
+    height: 26px;
+    line-height: 26px;
+    padding: 0 20px 0 10px;
+    background: #fff;
+    margin-right: 6px;
+    width: 106px;
+    text-align: left;
+    border-radius: 2px;
+    overflow: hidden;
+    &:before {
+      content: "";
+      position: absolute;
+      right: 10px;
+      top: 8px;
+      border-top: 1px solid $borderColor;
+      border-right: 1px solid $borderColor;
+      width: 6px;
+      height: 6px;
+      transform: rotate(135deg);
+    }
+  }
+  .sel-cont {
+    display: none;
+    position: absolute;
+    top: 25px;
+    left: 0;
+    z-index: 2;
+    padding-top: 10px;
+    width: 516px;
+    max-height: 485px;
+    border: 1px solid $mainColor;
+    background: #fff;
+    font-size: 12px;
+    color: #666666;
+    line-height: 36px;
+  }
+  .cont-fl {
+    background: #f5f5f5;
+    width: 82px;
+    overflow: auto;
+    li{
+      height: 36px;
+      padding-left: 14px;
+      cursor: pointer;
+      @include ellipsis;
+      &.active{
+        color: $mainColor;
+        background: #e9e9e9;
+      }
+    }
+  }
+  .cont-fr{
+    overflow: auto;
+    flex: 1;
+    ul{
+      display: flex;
+      flex-wrap: wrap;
+    }
+    li{
+      height: 36px;
+      width: 25%;
+      cursor: pointer;
+      padding-left: 20px;
+      box-sizing: border-box;
+      @include ellipsis;
+      &:hover,&.active{
+        color: $mainColor;
+      }
+    }
+  }
+}
+
+.f-radio {
+  position: relative;
+  color: #333333;
+  border: 1px solid $borderColor;
+  height: 26px;
+  line-height: 26px;
+  padding: 0 12px;
+  background: #fff;
+  margin-right: 6px;
+  border-radius: 2px;
+  overflow: hidden;
+  &.ext-pay {
+    padding: 0 20px;
+  }
+  &.checked {
+    border-color: $mainColor;
+    color: $mainColor;
+    &:before {
+      content: "";
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      @include triangle-bottomright(7px, $mainColor);
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      right: 1px;
+      bottom: 3px;
+      width: 6px;
+      height: 3px;
+      border-left: 1px solid #fff;
+      border-bottom: 1px solid #fff;
+      transform: rotate(-45deg);
+    }
+  }
+}
+.pay {
+  display: flex;
+  text-align: center;
+  padding-left: 46px;
+  font-size: 12px;
+}
+.pay-fl{
+  margin-right: 50px;
+  .qrcode {
+    position: relative;
+    width: 176px;
+    height: 176px;
+    border: 1px solid $borderColor;
+    &:before,&:after{
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 27px;
+      height: 32px;
+      transform: translate(-30px,-50%);
+      background: url(./img/icon-zfb.png) no-repeat;
+    }
+    &:after{
+      transform: translate(2px,-50%);
+      background: url(./img/icon-wx.png) no-repeat;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  p {
+    margin-top: 12px;
+    color: #333;
+  }
+}
+.pay-fr{
+  color: #999999;
+  line-height: 20px;
+  a{
+    display: block;
+    width: 134px;
+    height: 40px;
+    line-height: 40px;
+    cursor: pointer;
+    background: $mainColor;
+    color: #FFF;
+    border-radius: 2px;
+    &:hover{
+      opacity: 0.8;
+    }
+  }
+  div{
+    padding-bottom: 106px;
+    background: url(./img/icon-pc-zfb.png) center 50px no-repeat;
+  }
+}
+.f-checkbox{
+  padding: 26px 0 0 46px;
+  font-size: 12px;
+  color: #666;
+  line-height: 18px;
+  a{
+    color: $mainColor;
+  }
+  label{
+    cursor: pointer;
+  }
+  input[type=checkbox]{
+    position: relative;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #ccc;
+    vertical-align: bottom;
+    outline: none;
+    cursor: pointer;
+    &:checked{
+      &:before{
+        content: '';
+        position: absolute;
+        top: 3px;
+        left: 2px;
+        width: 8px;
+        height: 4px;
+        transform: rotate(-45deg);
+        border-left: 1px solid #4faf63;
+        border-bottom: 1px solid #4faf63;
+      }
+    }
+  }
+}
+</style>

app/src/page/self/index.vue

@@ -18,7 +18,7 @@
                         <div class="my-game-wrap">
                             <div :class="['my-game-item',isEdit&&'my-game-edit']" v-for="(item,index) in arr[num-1]" :key="index">
                                 <div class="game-img">
-                                    <img src="" alt="" class="img">
+                                    <img src="http://fed.webdev.ouj.com/56x56" alt="" class="img">
                                     <div class="img-type">新服</div>
                                     <div class="to-top" v-if="isEdit"></div>
                                 </div>
@@ -61,7 +61,7 @@
                         <i></i>
                     </div>
                     <div class="content">
-                        <img src="" alt="">
+                        <img src="http://fed.webdev.ouj.com/48x48" alt="">
                         <div class="desc">
                             <h1>
                                 小小海贼王

app/src/page/self/style.scss

@@ -96,6 +96,7 @@
         position: relative;
         padding: 5px;
         box-sizing: border-box;
+        cursor: pointer;
         &:nth-child(2n) {
             padding-left: 5px;
             box-sizing: border-box;
@@ -214,6 +215,7 @@
             line-height: 1;
             img {
                 flex: 0 0 auto;
+                border-radius: 4px;
                 display: inline-block;
                 width: 48px;
                 height: 48px;

app/src/router/index.js

@@ -13,7 +13,7 @@ const router = new Router({
         },
         {
             name: 'list',
-            path: '/list/:type',
+            path: '/list/',
             component: () => import('@/page/list'),
             children: [
                 {
@@ -31,6 +31,10 @@ const router = new Router({
                 {
                     path: 'allGame',
                     component: () => import('@/page/list/allGame')
+                },
+                {
+                    path: 'allGame/:type',
+                    component: () => import('@/page/list/allGame')
                 }
             ]
         },
@@ -45,9 +49,14 @@ const router = new Router({
             component: () => import('@/page/popup/setting')
         },
         {
-            name: 'hallNews',
-            path: '/popup/hallNews',
-            component: () => import('@/page/popup/hallNews')
+            name:'hallNews',
+            path:'/popup/hallNews',
+            component:() => import('@/page/popup/hallNews')
+        },
+        {
+            name:'pay',
+            path:'/popup/pay',
+            component:() => import('@/page/popup/pay')
         },
         {
             name: 'notice',

app/src/style/global.scss

@@ -2,28 +2,46 @@
 
 @import "base";
 @import "module/popup";
-html,body{
+
+html,
+body {
     height: 100%;
 }
-html{
+
+html {
     @include beatifyScrollBar;
 }
+
 body {
     background-color: $index-bg-color;
-    font-family: "Microsoft Yahei","PingFang SC";
+    font-family: "Microsoft Yahei", "PingFang SC";
 }
-#app{
+
+#app {
     height: 100%;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .3s;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
 .o-wrap {
     width: 1200px;
     margin: 0 auto;
     position: relative;
 }
-.p-wrap{
+
+.p-wrap {
     position: relative;
     width: 100%;
     height: 100%;
+    background: #FFF;
 }
 
 a {
@@ -35,10 +53,16 @@ a {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    &.center{
+
+    &.center {
         justify-content: center;
     }
+
     .hd {
         @include head;
     }
 }
+
+.pub-scrollbar {
+    @include beatifyScrollBar;
+}

app/src/style/module/_popup.scss

@@ -10,4 +10,32 @@
     line-height: 26px;
     text-align: center;
     overflow: hidden;
+}
+
+.pay-confirm-btn {
+    width: 177px;
+    height: 40px;
+    margin: 0 auto;
+    font-size: 14px;
+    color: #ffffff;
+    text-align: center;
+    line-height: 40px;
+    background: $main-active-color;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.pay-reconfirm-btn {
+    box-sizing: border-box;
+    width: 177px;
+    height: 40px;
+    margin: 0 auto;
+    font-size: 14px;
+    color: $main-active-color;
+    text-align: center;
+    line-height: 40px;
+    background: #fff;
+    cursor: pointer;
+    border: 1px solid $main-active-color;
+    border-radius: 3px;
 }