收藏&盲盒

src/main/pc-space/src/components/PageHeader.vue

@@ -34,6 +34,10 @@ export default {
             this.active = item;
             if (item === '铸造者') {
                 this.$router.push('/casting');
+            } else if (item === '收藏探索') {
+                this.$router.push('/collection');
+            } else if (item === '数字盲盒') {
+                this.$router.push('/blindbox?flag=' + 1);
             }
         }
     }
@@ -46,10 +50,11 @@ export default {
     .header {
         display: flex;
         align-items: center;
+        justify-content: space-between;
         .logo {
             width: 170px;
             height: 60px;
-            padding: 15px 538px 15px 30px;
+            padding: 15px 0px 15px 30px;
         }
         .content {
             display: flex;

src/main/pc-space/src/components/SearchInfo.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="search">
+        <el-input prefix-icon="el-icon-zoom-out" placeholder="请输入内容" v-model="input" clearable> </el-input>
+        <el-dropdown @command="onCommand">
+            <el-button type="primary"> 综合排序<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
+            <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>黄金糕</el-dropdown-item>
+                <el-dropdown-item>狮子头</el-dropdown-item>
+                <el-dropdown-item>螺蛳粉</el-dropdown-item>
+            </el-dropdown-menu>
+        </el-dropdown>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            input: ''
+        };
+    },
+    methods: {
+        onCommand(command) {}
+    }
+};
+</script>
+<style lang="less" scoped>
+.search {
+    height: 124px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    /deep/ .el-input__inner {
+        background: #0f1111;
+        width: 280px;
+        height: 42px;
+        color: #fff;
+        border-radius: 8px;
+        border: 1px solid #898989;
+    }
+    /deep/ .el-button {
+        background: #0f1111;
+        width: 120px;
+        height: 42px;
+        color: #fff;
+        border-radius: 8px;
+        border: 1px solid #898989;
+    }
+    /deep/ .el-dropdown-menu {
+        background: #fff;
+    }
+}
+</style>

src/main/pc-space/src/components/goodsInfo.vue

@@ -7,6 +7,10 @@
                 <div class="price">
                     <img class="img1" src="../assets/img/icon_jiage@3x.png" alt="" />
                     <div class="num">{{ item.price }}</div>
+                    <div class="time" v-if="flagId == 1">
+                        <div class="time1">抢购倒计时</div>
+                        <div class="time2">1天 01:35:06</div>
+                    </div>
                 </div>
                 <div class="border"></div>
                 <div class="fans">
@@ -15,25 +19,24 @@
                             <img class="text2" src="../assets/img/888.jpg" alt="" />
                             <div class="text3">铸造者</div>
                         </div>
-                        <div class="text1">
+                        <div class="text1" v-if="flagId !== '1'">
                             <img class="text2" src="../assets/img/888.jpg" alt="" />
                             <div class="text3">持有者</div>
                         </div>
                     </div>
                     <div class="text">
-                        <div class="text1">
+                        <div class="text1" v-if="flagId !== '1'">
                             <img class="text2 text4" src="../assets/img/icon-dianzan@3x.png" alt="" />
                             <div class="text3">16</div>
                         </div>
+                        <div class="text1" v-else>
+                            <img class="text2 text4" src="../assets/img/icon-yuyue@3x.png" alt="" />
+                            <div class="text3">预约</div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="all">
-            <img class="img1" src="../assets/img/icon_inter@3x.png" alt="" />
-            <div class="name">查看更多</div>
-            <img class="img1" src="../assets/img/icon_inter@3x (3).png" alt="" />
-        </div>
     </div>
 </template>
 <script>
@@ -47,23 +50,29 @@ export default {
                 { name: '游戏《百分之一》精美皮肤-恶…', price: '320' }
             ]
         };
-    }
+    },
+    computed: {
+        flagId() {
+            return this.$route.query.flag;
+        }
+    },
+    mounted() {
+        console.log(this.$route.query.flag);
+    },
+    methods: {}
 };
 </script>
 <style lang="less" scoped>
 .box {
     display: flex;
     align-items: center;
-    justify-content: center;
-    padding-left: 10px;
+    justify-content: space-between;
     .content {
         width: 276px;
         height: 416px;
         background: #1c1e26;
-        margin-bottom: 32px;
-
+        margin-bottom: 40px;
         border: 1px solid;
-        margin-right: 32px;
         border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
         .imgBox {
             height: 266px;
@@ -80,7 +89,8 @@ export default {
         .price {
             display: flex;
             align-items: center;
-            padding: 0 0 16px 16px;
+            // justify-content: space-between;
+            padding: 0 16px 16px;
             .img1 {
                 width: 10px;
                 height: 11px;
@@ -93,6 +103,23 @@ export default {
                 color: #00ffcb;
                 line-height: 30px;
             }
+            .time {
+                display: flex;
+                margin-left: 24px;
+                .time1 {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 24px;
+                }
+                .time2 {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #00ffcb;
+                    line-height: 24px;
+                    margin-left: 6px;
+                }
+            }
         }
         .border {
             height: 1px;
@@ -135,20 +162,4 @@ export default {
         }
     }
 }
-.all {
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    .img1 {
-        width: 32px;
-        height: 24px;
-    }
-    .name {
-        font-size: 16px;
-        font-weight: 400;
-        color: #ffffff;
-        line-height: 24px;
-        margin: 0 10px;
-    }
-}
 </style>

src/main/pc-space/src/router/index.js

@@ -31,6 +31,22 @@ const routes = [
                 meta: {
                     title: '铸造'
                 }
+            },
+            {
+                path: '/collection',
+                name: 'collection',
+                component: () => import('../views/Collection.vue'),
+                meta: {
+                    title: '收藏探索'
+                }
+            },
+            {
+                path: '/blindbox',
+                name: 'blindbox',
+                component: () => import('../views/Blindsbox.vue'),
+                meta: {
+                    title: '数字盲盒'
+                }
             }
         ]
     }

src/main/pc-space/src/views/Blindsbox.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="container">
+        <div class="title">欢迎来到 NFT 盲盒市场</div>
+        <search-info></search-info>
+        <goods-info></goods-info>
+    </div>
+</template>
+<script>
+import GoodsInfo from '../components/GoodsInfo.vue';
+import SearchInfo from '../components/SearchInfo.vue';
+export default {
+    components: { GoodsInfo, SearchInfo },
+    data() {
+        return {
+            currentPage4: 4
+        };
+    },
+    methods: {}
+};
+</script>
+<style lang="less" scoped>
+.container {
+    padding: 0 200px;
+
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0 30px;
+        text-align: left;
+    }
+}
+</style>

src/main/pc-space/src/views/Collection.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="container">
+        <div class="title">欢迎来到 NFT 市场</div>
+        <div class="tabs">
+            <div
+                class="tab"
+                :class="{ active: active === item }"
+                v-for="(item, index) in tabs"
+                :key="index"
+                @click="tab(item)"
+            >
+                {{ item }}
+            </div>
+        </div>
+        <div class="border"></div>
+        <search-info></search-info>
+        <goods-info></goods-info>
+        <!-- <div>
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="currentPage4"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="100"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="400"
+            >
+            </el-pagination>
+        </div> -->
+    </div>
+</template>
+<script>
+import GoodsInfo from '../components/GoodsInfo.vue';
+import SearchInfo from '../components/SearchInfo.vue';
+export default {
+    components: { GoodsInfo, SearchInfo },
+    data() {
+        return {
+            tabs: ['全部', '新品', '转让', '拍卖'],
+            active: '全部',
+            currentPage4: 4
+        };
+    },
+    methods: {
+        tab(item) {
+            this.active = item;
+        },
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    padding: 0 200px;
+
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0;
+        text-align: left;
+    }
+    .tabs {
+        display: flex;
+        align-items: center;
+        padding-bottom: 30px;
+        text-align: center;
+        .tab {
+            width: 140px;
+            border: 1px solid #939599;
+            height: 42px;
+            font-size: 18px;
+            font-weight: bold;
+            color: #949699;
+            line-height: 42px;
+            &.active {
+                color: #ffffff;
+                background: linear-gradient(46deg, #00ffcb 0%, #006eff 100%);
+            }
+            &:first-child {
+                border-radius: 8px 0px 0px 8px;
+            }
+            &:last-child {
+                border-radius: 0px 8px 8px 0px;
+            }
+        }
+    }
+    .border {
+        height: 1px;
+        background: #494a4d;
+        border-radius: 1px;
+    }
+
+    // .footer {
+    //     flex-shrink: 0;
+    // }
+}
+</style>

src/main/pc-space/src/views/Home.vue

@@ -4,97 +4,106 @@
             <div class="title">游戏数字资产的链上开创者们</div>
             <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
             <div class="btn">立即探索</div>
-        </div>
-        <div class="introduce">
-            <div class="introduce2">
-                <img class="img1" src="../assets/img/888.jpg" alt="" />
-                <div>
-                    <div class="name">本期推荐：创作者姓名</div>
-                    <div class="name name1">作者简介</div>
-                    <div class="name2">
-                        介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍…
+            <div class="introduce">
+                <div class="introduce2">
+                    <img class="img1" src="../assets/img/888.jpg" alt="" />
+                    <div>
+                        <div class="name">本期推荐：创作者姓名</div>
+                        <div class="name name1">作者简介</div>
+                        <div class="name2">
+                            介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍…
+                        </div>
                     </div>
                 </div>
+                <img class="img2" src="../assets/img/888.jpg" alt="" />
+                <img class="img2" src="../assets/img/888.jpg" alt="" />
+                <img class="img2" src="../assets/img/888.jpg" alt="" />
             </div>
-            <img class="img2" src="../assets/img/888.jpg" alt="" />
-            <img class="img2" src="../assets/img/888.jpg" alt="" />
-            <img class="img2" src="../assets/img/888.jpg" alt="" />
-        </div>
-        <div class="hot">最HOT收藏品</div>
-        <goods-info></goods-info>
-        <div class="hot">官方活动</div>
-        <div class="imgBox">
-            <img class="imgBox1" src="../assets/img/888.jpg" alt="" />
-            <img class="imgBox1" src="../assets/img/888.jpg" alt="" />
-        </div>
-        <div class="all">
-            <img class="img1" src="../assets/img/icon_inter@3x.png" alt="" />
-            <div class="name">查看更多</div>
-            <img class="img1" src="../assets/img/icon_inter@3x (3).png" alt="" />
-        </div>
-        <!-- <div> -->
-        <div class="describe">
-            <div class="box">
-                <div class="box1">
-                    <div class="text1">发现</div>
-                    <div class="text2">和你一起探索，全球最有才华的开发者铸造开创性NFT数字游戏藏品</div>
-                </div>
+            <div class="hot">最HOT收藏品</div>
+            <goods-info></goods-info>
+            <div class="all all1">
+                <img class="img1" src="../assets/img/icon_inter@3x.png" alt="" />
+                <div class="name">查看更多</div>
+                <img class="img1" src="../assets/img/icon_inter@3x (3).png" alt="" />
             </div>
-            <div class="box">
-                <div class="box1">
-                    <div class="text1">交易</div>
-                    <div class="text2">方便快捷-无需数字钱包，人民币支付即可购买和出售游戏资产收藏品</div>
-                </div>
+            <div class="hot">官方活动</div>
+            <div class="imgBox">
+                <img class="imgBox1" src="../assets/img/888.jpg" alt="" />
+                <img class="imgBox1" src="../assets/img/888.jpg" alt="" />
             </div>
-        </div>
-        <div class="describe">
-            <div class="box">
-                <div class="box1">
-                    <div class="text1">收集</div>
-                    <div class="text2">用稀有和独特的数字宝藏增加库存，成为全球首批游戏数字资产收藏家</div>
-                </div>
+            <div class="all">
+                <img class="img1" src="../assets/img/icon_inter@3x.png" alt="" />
+                <div class="name">查看更多</div>
+                <img class="img1" src="../assets/img/icon_inter@3x (3).png" alt="" />
             </div>
-            <div class="box">
-                <div class="box1">
-                    <div class="text1">使命</div>
-                    <div class="text2">让每个游戏资产都能获得“电子身份证”，让每位收藏家都能获得区块链“数字指纹”</div>
+            <!-- <div> -->
+            <div class="describe">
+                <div class="box">
+                    <div class="box1">
+                        <div class="text1">发现</div>
+                        <div class="text2">和你一起探索，全球最有才华的开发者铸造开创性NFT数字游戏藏品</div>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="box1">
+                        <div class="text1">交易</div>
+                        <div class="text2">方便快捷-无需数字钱包，人民币支付即可购买和出售游戏资产收藏品</div>
+                    </div>
                 </div>
             </div>
-        </div>
-        <!-- </div> -->
-        <div class="space">为什么叫第九空间</div>
-        <div class="space2">一切数据皆可复制的时代，第九空间NFT让你拥有一份独家数字藏品，让你拥有一份唯一游戏权益</div>
-        <div class="th">
-            <div>
-                <div class="words1">我们始终坚信</div>
-                <div class="words2">未来的虚拟世界将演变成同具价值的数字世界</div>
-            </div>
-            <div class="border"></div>
-            <div>
-                <div class="words1">我们始终坚信</div>
-                <div class="words2">未来的虚拟世界将演变成同具价值的数字世界</div>
+            <div class="describe">
+                <div class="box">
+                    <div class="box1">
+                        <div class="text1">收集</div>
+                        <div class="text2">用稀有和独特的数字宝藏增加库存，成为全球首批游戏数字资产收藏家</div>
+                    </div>
+                </div>
+                <div class="box">
+                    <div class="box1">
+                        <div class="text1">使命</div>
+                        <div class="text2">
+                            让每个游戏资产都能获得“电子身份证”，让每位收藏家都能获得区块链“数字指纹”
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="border"></div>
-            <div>
-                <div class="words1">我们始终坚信</div>
-                <div class="words2">未来的虚拟世界将演变成同具价值的数字世界</div>
+            <!-- </div> -->
+            <div class="space">为什么叫第九空间</div>
+            <div class="space2">
+                一切数据皆可复制的时代，第九空间NFT让你拥有一份独家数字藏品，让你拥有一份唯一游戏权益
             </div>
-            <div class="border"></div>
-            <div>
-                <div class="words1">我们始终坚信</div>
-                <div class="all">
-                    <img class="img1" src="../assets/img/icon_inter@3x.png" alt="" />
-                    <div class="name">了解更多</div>
-                    <img class="img1" src="../assets/img/icon_inter@3x (3).png" alt="" />
+            <div class="th">
+                <div>
+                    <div class="words1">我们始终坚信</div>
+                    <div class="words2">未来的虚拟世界将演变成同具价值的数字世界</div>
+                </div>
+                <div class="border"></div>
+                <div>
+                    <div class="words1">我们始终坚信</div>
+                    <div class="words2">未来的虚拟世界将演变成同具价值的数字世界</div>
+                </div>
+                <div class="border"></div>
+                <div>
+                    <div class="words1">我们始终坚信</div>
+                    <div class="words2">未来的虚拟世界将演变成同具价值的数字世界</div>
+                </div>
+                <div class="border"></div>
+                <div>
+                    <div class="words1 words3">我们始终坚信</div>
+                    <div class="all">
+                        <img class="img1" src="../assets/img/icon_inter@3x.png" alt="" />
+                        <div class="name">了解更多</div>
+                        <img class="img1" src="../assets/img/icon_inter@3x (3).png" alt="" />
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 <script>
-import goodsInfo from '../components/goodsInfo.vue';
+import GoodsInfo from '../components/GoodsInfo.vue';
 export default {
-    components: { goodsInfo },
+    components: { GoodsInfo },
     data() {
         return {};
     },
@@ -103,7 +112,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
-    padding-left: 17.5%;
+    padding: 0 200px;
     .title {
         height: 42px;
         font-size: 32px;
@@ -135,7 +144,7 @@ export default {
 .introduce {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     .introduce2 {
         display: flex;
         align-items: center;
@@ -184,12 +193,11 @@ export default {
 .imgBox {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     .imgBox1 {
         width: 585px;
         height: 260px;
         border-radius: 8px;
-        margin-right: 30px;
     }
 }
 .all {
@@ -197,6 +205,9 @@ export default {
     align-content: center;
     justify-content: center;
     margin: 40px 0 60px;
+    &.all1 {
+        margin: 0;
+    }
     .img1 {
         width: 32px;
         height: 24px;
@@ -212,17 +223,16 @@ export default {
 .describe {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     .box {
         width: 580px;
         height: 114px;
         background: #0f1111;
         border-radius: 8px;
         border: 1px solid;
-        margin-right: 30px;
         margin-bottom: 30px;
         border-image: linear-gradient(
-                174deg,
+                143deg,
                 rgba(0, 255, 203, 0.6),
                 rgba(0, 209, 220, 0.1),
                 rgba(0, 151, 240, 0.1),
@@ -266,7 +276,8 @@ export default {
 }
 .th {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    padding: 0 50px;
     .border {
         width: 1px;
         height: 115px;
@@ -279,6 +290,9 @@ export default {
         color: #ffffff;
         line-height: 25px;
         margin: 12px 0;
+        &.words3 {
+            text-align: center;
+        }
     }
     .words2 {
         width: 240px;

src/main/pc-space/src/views/Index.vue

@@ -19,27 +19,27 @@
                     </div>
                     <div class="footer-r">
                         <div class="slogan">
-                            <img class="logo1" src="../assets/img/copy_icon@3x.png" alt="" />
-                            <img class="logo1" src="../assets/img/copy_icon@3x.png" alt="" />
-                            <img class="logo1" src="../assets/img/copy_icon@3x.png" alt="" />
-                            <img class="logo1" src="../assets/img/copy_icon@3x.png" alt="" />
+                            <img class="logo1" src="../assets/img/icon-weixin@3x.png" alt="" />
+                            <img class="logo1" src="../assets/img/icon-weixin@3x.png" alt="" />
+                            <img class="logo1" src="../assets/img/icon-qq@3x.png" alt="" />
+                            <img class="logo1" src="../assets/img/icon-Twitter@3x.png" alt="" />
                         </div>
                         <div class="content">
                             <div class="content1">
-                                <img class="logo2" src="../assets/img/copy_icon@3x.png" alt="" />
+                                <img class="logo2" src="../assets/img/icon_lianxiwomen@3x.png" alt="" />
                                 <div class="name">联系我们</div>
                             </div>
                             <div class="content1">
-                                <img class="logo2" src="../assets/img/copy_icon@3x.png" alt="" />
-                                <div class="name">联系我们</div>
+                                <img class="logo2" src="../assets/img/icon_guanyuwomen@3x.png" alt="" />
+                                <div class="name">关于我们</div>
                             </div>
                             <div class="content1">
-                                <img class="logo2" src="../assets/img/copy_icon@3x.png" alt="" />
-                                <div class="name">联系我们</div>
+                                <img class="logo2" src="../assets/img/icon_shangwuhezuo@3x.png" alt="" />
+                                <div class="name">商务合作</div>
                             </div>
                             <div class="content1">
-                                <img class="logo2" src="../assets/img/copy_icon@3x.png" alt="" />
-                                <div class="name">联系我们</div>
+                                <img class="logo2" src="../assets/img/icon_yincangtiaokuan@3x.png" alt="" />
+                                <div class="name">隐私条款</div>
                             </div>
                         </div>
                     </div>
@@ -62,7 +62,6 @@ export default {
 .el-main {
     min-height: 1000px;
     background: #0f1111;
-    // padding-left: 200px;
 }
 .el-footer {
     position: relative;