调整目录结构

app/src/components/index/boutiqueGame/index.vue

@@ -0,0 +1,148 @@
+<template>
+    <div class="boutique-game">
+        <div class="b-g-title">
+            <div class="title-left">
+                <h1>精品游戏</h1>
+                <div class="b-g-tab">
+                    <span :class="['type',tabIndex==0&&'active']" @mousemove="tabChange(0)">类型</span>
+                    <span :class="[tabIndex==1&&'active']" @mousemove="tabChange(1)">题材</span>
+                </div>
+            </div>
+            <more></more>
+        </div>
+        <div class="b-g-info-box">
+            <div class="b-g-info-item" v-for="(item,index) in currentList" :key="index">
+                <div class="type-name">{{item.title}}</div>
+                <div class="item-list">
+                    <div
+                        class="game-info"
+                        v-for="(game,gameIndex) in item.arr"
+                        :key="gameIndex"
+                        :title="game.name"
+                    >
+                        <img :src="game.img" alt="">
+                        <span>{{game.name}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import Vue from 'vue';
+
+import More from '@/duowan-ui/more/index.js'
+Vue.use(More)
+export default {
+    data() {
+        return {
+            tabIndex: 0,
+            currentList: [],
+            list: [
+                {
+                    title: '角色扮演',
+                    arr: [
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '水煮三国HD' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '美神' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '战斗乾坤' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '战神风云' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '大圣轮回H5' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '气魄' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '传奇世界' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '大天使之剑' }
+
+                    ]
+                },
+                {
+                    title: '战略决策',
+                    arr: [
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '战神风云' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '大圣轮回H5' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '气魄' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '传奇世界' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '战斗乾坤' },
+
+                    ]
+                }, {
+                    title: '休闲竞技',
+                    arr: [
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '战斗乾坤' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '战神风云' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '大圣轮回H5' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '气魄' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '传奇世界' }
+
+                    ]
+                }, {
+                    title: '棋牌娱乐',
+                    arr: [
+
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '气魄' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '传奇世界' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '大天使之剑' }
+                    ]
+                }
+            ],
+            typeList: [
+                {
+                    title: '角色扮演',
+                    arr: [
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '战斗乾坤' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '水煮三国HD' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '美神' },
+
+                    ]
+                },
+                {
+                    title: '战略决策',
+                    arr: [
+
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '气魄' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '传奇世界' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '战斗乾坤' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '战神风云' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '大圣轮回H5' },
+
+                    ]
+                }, {
+                    title: '休闲竞技',
+                    arr: [
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '战神风云' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '战斗乾坤' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/azws_32.png', name: '传奇世界' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '大圣轮回H5' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '气魄' },
+
+                    ]
+                }, {
+                    title: '棋牌娱乐',
+                    arr: [
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/azws_32.png', name: '传奇世界' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '大天使之剑' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '大天使之剑' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '气魄' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '大圣轮回H5' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '气魄' },
+                        { img: 'http://lobby.dwstatic.com/goa/pic/o/yhjx_32.png', name: '传奇世界' },
+                    ]
+                }
+            ]
+        }
+    },
+    methods: {
+        tabChange(index) {
+            this.tabIndex = index
+            index ? (this.currentList = this.typeList) : this.currentList = this.list
+
+        }
+    },
+    mounted() {
+        this.currentList = this.list
+    }
+}
+
+
+</script>
+<style lang="scss">
+@import './style';
+</style>

app/src/components/index/boutiqueGame/style.scss

@@ -0,0 +1,94 @@
+.boutique-game {
+    width: 928px;
+    height: 341px;
+    background: #fff;
+    border: 1px solid #f1f1f1;
+    border-radius: 4px;
+    margin-top: 20px;
+    .b-g-title {
+        height: 66px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px 0 20px;
+        box-sizing: border-box;
+    }
+    .title-left {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        h1 {
+            font-size: 18px;
+            color: $title-text-color;
+        }
+    }
+    .b-g-tab {
+        margin-left: 57px;
+        margin-top: 8px;
+        span {
+            font-size: 12px;
+            color: $note-text-color;
+            display: inline-block;
+            padding: 0 3px;
+            border-bottom: 2px solid rgba(255, 255, 255, 0);
+            padding-bottom: 5px;
+            cursor: pointer;
+            &:hover {
+                color: $main-active-color;
+                border-bottom: 2px solid rgba($main-active-color, 1);
+                transition: all 0.3s;
+            }
+        }
+        .type {
+            margin-right: 40px;
+        }
+        .active {
+            color: $main-active-color;
+            border-bottom: 2px solid $main-active-color;
+            transition: all 0.2s;
+        }
+    }
+    .b-g-info-item {
+        padding: 0 20px;
+        box-sizing: border-box;
+        display: flex;
+        &:last-child .item-list {
+            padding-bottom: 0;
+        }
+    }
+    .type-name {
+        width: 79px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        background: url(./img/type_bg.png) no-repeat center 0/100%;
+        font-size: 14px;
+        color: $note-text-color;
+        margin-right: 14px;
+    }
+    .item-list {
+        width: 756px;
+        display: flex;
+        flex-wrap: wrap;
+        padding-bottom: 29px;
+        .game-info {
+            width: 151px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            cursor: pointer;
+            &:hover {
+                color: $main-active-color;
+            }
+            img {
+                width: 32px;
+                height: 32px;
+                padding-right: 10px;
+            }
+        }
+        .game-info:nth-child(n + 6) {
+            margin-top: 10px;
+        }
+    }
+}

app/src/components/index/networkMonitoring/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="mod-net">
+        <div class="page-right">
+            <div class="title">网络游戏未成年人</div>
+            <div class="content">
+                家长监护
+                <span>工程</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+}
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+</style>

app/src/components/index/networkMonitoring/style.scss

@@ -0,0 +1,25 @@
+.mod-net {
+    .page-right {
+        width: 140px;
+        height: 88px;
+        position: absolute;
+        right: -168px;
+        top: 15px;
+        background: url(./img/icon_nail.png);
+        .title {
+            text-align: center;
+            font-size: 14px;
+            color: #fff;
+            margin-top: 15px;
+        }
+        .content {
+            text-align: center;
+            margin-top: 20px;
+            font-size: 15px;
+            color: #329747;
+            font-weight: bold;
+            display: flex;
+            justify-content: center;
+        }
+    }
+}

app/src/page/index.vue

@@ -14,7 +14,7 @@
                 <div class="col-rt">
                     <hot-game-today></hot-game-today>
                     <hot-game></hot-game>
-                    <boutiqueGame></boutiqueGame>
+                    <boutique-game></boutique-game>
                 </div>
             </div>
             <network-monitoring></network-monitoring>
@@ -27,10 +27,10 @@ import banner from "@/components/banner";
 import serveNotice from "@/components/serveNotice";
 import hotGameToday from "@/components/index/hotGameToday";
 import rank from "@/components/rank";
-import boutiqueGame from "@/components/boutiqueGame";
+import boutiqueGame from "@/components/index/boutiqueGame";
 import hotGame from "@/components/hotGame";
 import signIn from "@/components/signIn";
-import networkMonitoring from "@/components/networkMonitoring";
+import networkMonitoring from "@/components/index/networkMonitoring";
 
 
 export default {

app/src/page/list/allGame.vue

@@ -28,7 +28,7 @@
     </div>
 </template>
 <script>
-import gameListPop from '@/components/gameListPop'
+import gameListPop from '@/components/list/gameListPop'
 export default {
     components: {
         gameListPop

app/src/page/list/popular.vue

@@ -15,7 +15,7 @@
     </div>
 </template>
 <script>
-import gameListPop from '@/components/gameListPop'
+import gameListPop from '@/components/list/gameListPop'
 export default {
     components: {
         gameListPop

app/src/page/self/style.scss

@@ -260,6 +260,7 @@
     .del-spacing {
         width: 138px;
         padding-left: 5px;
+
         box-sizing: border-box;
     }
 }