商品详情

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

@@ -38,6 +38,8 @@ export default {
                 this.$router.push('/collection');
             } else if (item === '数字盲盒') {
                 this.$router.push('/blindbox?flag=' + 1);
+            } else if (item === '我的NFT') {
+                this.$router.push('/my');
             }
         }
     }
@@ -47,6 +49,7 @@ export default {
 .container {
     height: 90px;
     background: #0f1111;
+    min-width: 1400px;
     .header {
         display: flex;
         align-items: center;
@@ -97,7 +100,7 @@ export default {
                 text-align: center;
                 color: #00ffcb;
                 font-size: 16px;
-                margin: 0 30px 0 30px;
+                margin: 0 30px;
                 .login1 {
                     border: 1px solid #939599;
                     color: #939599;

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

@@ -30,7 +30,7 @@ export default {
     align-items: center;
     justify-content: space-between;
     /deep/ .el-input__inner {
-        background: #0f1111;
+        background: #1a1a1a;
         width: 280px;
         height: 42px;
         color: #fff;
@@ -38,7 +38,7 @@ export default {
         border: 1px solid #898989;
     }
     /deep/ .el-button {
-        background: #0f1111;
+        background: #1a1a1a;
         width: 120px;
         height: 42px;
         color: #fff;

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="box">
+        <div class="box" @click="Store">
             <div class="content" v-for="(item, index) in list" :key="index">
                 <img class="imgBox" src="../assets/img/888.jpg" alt="" />
                 <div class="introduce">{{ item.name }}</div>
@@ -56,10 +56,12 @@ export default {
             return this.$route.query.flag;
         }
     },
-    mounted() {
-        console.log(this.$route.query.flag);
-    },
-    methods: {}
+    mounted() {},
+    methods: {
+        Store() {
+            this.$router.push('/storeDetail');
+        }
+    }
 };
 </script>
 <style lang="less" scoped>
@@ -76,7 +78,7 @@ export default {
         border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
         .imgBox {
             height: 266px;
-            width: 100%;
+            width: 276px;
             // border-radius: 8px 8px 0px 0px;
         }
         .introduce {

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

@@ -4,6 +4,7 @@ import router from './router';
 import store from './store';
 import http from './plugins/http';
 import ElementUI from 'element-ui';
+import common from './mixins/common';
 ElementUI.Dialog.props.closeOnClickModal.default = false;
 import './styles/common.less';
 // import './styles/font.less';
@@ -15,6 +16,7 @@ Vue.prototype.$colors = {
 };
 Vue.use(ElementUI);
 Vue.use(http);
+Vue.use(common);
 
 Vue.config.productionTip = false;
 

src/main/pc-space/src/mixins/common.js

@@ -0,0 +1,63 @@
+// import dayjs from 'dayjs';
+// import { checkSetting } from '../utils/getVariables.js'
+export default {
+    computed: {
+        isLogin() {
+            return !!this.$store.state.userInfo;
+        }
+    },
+    methods: {
+        getLabelName(val = '', list = []) {
+            let info = list.find(item => {
+                return item.value === val;
+            });
+
+            return info ? info.label : val;
+        },
+        showList(list = [], tag = ',') {
+            if (!list) {
+                return '';
+            } else {
+                if (!(list instanceof Array)) {
+                    list = list.split(',');
+                }
+                return list.join(tag);
+            }
+        },
+        sendCode(phone) {
+            this.sending = true;
+            this.$http
+                .get('/sms/sendVerify', {
+                    phone: phone
+                })
+                .then(() => {
+                    this.sending = false;
+                    this.checkTime();
+                })
+                .catch(e => {
+                    this.sending = false;
+                    this.$message.error(e.error);
+                });
+        },
+        checkTime() {
+            this.time = 60;
+            let i = setInterval(() => {
+                this.time--;
+                if (this.time === 0) {
+                    clearInterval(i);
+                }
+            }, 1000);
+        },
+        pdCode(phone, code) {
+            this.$http
+                .get('/sms/verify', {
+                    phone: phone,
+                    code: code
+                })
+                .then(() => {})
+                .catch(e => {
+                    this.$message.error(e.error);
+                });
+        }
+    }
+};

src/main/pc-space/src/mixins/pageableTable.js

@@ -0,0 +1,181 @@
+export default {
+    data() {
+        return {
+            page: 1,
+            pageSize: Number(localStorage.getItem('pageSize') || 20),
+            totalPages: 0,
+            totalElements: 0,
+            sort: {},
+            sortStr: 'createdAt,desc',
+            tableHeight: 200,
+            fetchingData: true,
+            empty: false
+        };
+    },
+    created() {
+        this.page = Number(this.$route.query.page) || 1;
+        if (this.$route.query.sort) {
+            let sort = {};
+            for (let s of this.$route.query.sort.split(';')) {
+                if (s) {
+                    let [prop, order] = s.split(',');
+                    sort[prop] = order;
+                }
+            }
+            this.sort = sort;
+        }
+        if (!this.init) {
+            this.getData();
+        }
+    },
+    methods: {
+        getData() {
+            this.$emit('input', []);
+            let query = {
+                del: false,
+                ...this.$route.query
+            };
+            delete query.sort;
+            delete query.page;
+            delete query.size;
+            if (this.$route.query.page) {
+                this.page = Number(this.$route.query.page);
+            } else {
+                this.page;
+            }
+            let data = {
+                page: this.page - 1,
+                size: this.pageSize,
+                sort: this.sortStr
+                // query: query
+            };
+            if (this.beforeGetData) {
+                let mergeData = this.beforeGetData(query);
+                if (mergeData) {
+                    data = {
+                        ...data,
+                        ...mergeData
+                    };
+                }
+            }
+            // console.log(this.data);
+            this.fetchingData = true;
+            this.$http
+                .post(this.url, data, {
+                    body: 'json'
+                })
+                .then(res => {
+                    this.fetchingData = false;
+                    if (this.setList) {
+                        this.setList(res.content);
+                    }
+                    this.totalPages = res.totalPages;
+                    this.totalElements = res.totalElements;
+                    if (this.afterGetData) {
+                        this.afterGetData(res);
+                    }
+                    this.empty = res.empty;
+                })
+                .catch(e => {
+                    this.fetchingData = false;
+                    this.$message.error(e.error);
+                });
+        },
+        changeSort(prop, order) {
+            let newOrder = '';
+            if (order) {
+                if (this.sort[prop] !== order) {
+                    newOrder = order;
+                } else {
+                    newOrder = '';
+                }
+            } else {
+                if (this.sort[prop] === 'asc') {
+                    newOrder = 'desc';
+                } else if (this.sort[prop] === 'desc') {
+                    newOrder = '';
+                } else {
+                    newOrder = 'asc';
+                }
+            }
+            this.sort = {
+                // ...this.sort,
+                [prop]: newOrder
+            };
+        },
+        onSortChange(e) {
+            this.sort = e;
+            this.getData();
+        },
+        onSizeChange(e) {
+            localStorage.setItem('pageSize', e);
+            this.page = 1;
+            this.pageSize = e;
+            this.getData();
+        },
+        onCurrentChange(e) {
+            this.$router.push({
+                query: {
+                    ...this.$route.query,
+                    page: e
+                }
+            });
+            this.page = e;
+            this.getData();
+        },
+        adjustColumnWidth() {
+            let canvas = document.createElement('canvas');
+            let ctx = canvas.getContext('2d');
+            let measureTxt = text => {
+                return parseInt(ctx.measureText(text).width);
+            };
+            let rowWidth = [];
+            let headWidth = [];
+            document.querySelectorAll('.el-table__body-wrapper .table-row').forEach(row => {
+                row.querySelectorAll('.table-cell').forEach((cell, index) => {
+                    let children = cell.querySelector('.cell').children;
+                    if (children && children.length) {
+                        let width = 0;
+                        console.log(children);
+                        for (let child of children) {
+                            width +=
+                                child.clientWidth +
+                                parseInt(window.getComputedStyle(child).marginLeft.replace('px', '')) +
+                                parseInt(window.getComputedStyle(child).marginRight.replace('px', ''));
+                        }
+                        rowWidth[index] = width;
+                    } else {
+                        console.log(cell.querySelector('.cell').innerHTML);
+                        rowWidth[index] = measureTxt(cell.querySelector('.cell').innerHTML);
+                    }
+                });
+            });
+            this.$refs.table.columns.forEach(({ label }, index) => {
+                headWidth[index] = measureTxt(label) + 50;
+            });
+            console.log(rowWidth);
+            console.log(headWidth);
+        }
+    },
+    watch: {
+        sort() {
+            let sortStr = [];
+            for (let [key, value] of Object.entries(this.sort)) {
+                if (value) {
+                    sortStr.push(key + ',' + value);
+                }
+            }
+            sortStr = sortStr.join(';');
+            this.$router
+                .replace({
+                    query: {
+                        ...this.$route.query,
+                        sort: sortStr
+                    }
+                })
+                .catch(() => {});
+            this.sortStr = sortStr;
+            this.getData();
+        }
+    }
+};

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

@@ -10,7 +10,7 @@ Vue.use(VueRouter);
 const routes = [
     {
         path: '/',
-        redirect: 'home'
+        redirect: 'blindsboxDetail'
     },
     {
         path: '/',
@@ -47,6 +47,22 @@ const routes = [
                 meta: {
                     title: '数字盲盒'
                 }
+            },
+            {
+                path: '/storeDetail',
+                name: 'storeDetail',
+                component: () => import('../views/StoreDetail.vue'),
+                meta: {
+                    title: '数字盲盒详情'
+                }
+            },
+            {
+                path: '/my',
+                name: 'my',
+                component: () => import('../views/My.vue'),
+                meta: {
+                    title: '我的NFT'
+                }
             }
         ]
     }

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

@@ -11,9 +11,7 @@ import SearchInfo from '../components/SearchInfo.vue';
 export default {
     components: { GoodsInfo, SearchInfo },
     data() {
-        return {
-            currentPage4: 4
-        };
+        return {};
     },
     methods: {}
 };
@@ -29,7 +27,7 @@ export default {
         color: #ffffff;
         line-height: 42px;
         padding: 60px 0 30px;
-        text-align: left;
+        width: 400px;
     }
 }
 </style>

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

@@ -57,11 +57,11 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
-    background: #0f1111;
-    padding-left: 200px;
-    padding-bottom: 100px;
+    padding: 0 200px;
+
+    background: #1a1a1a;
     /deep/ .el-input__inner {
-        background: #0f1111;
+        background: #1a1a1a;
         width: 280px;
         height: 42px;
         color: #fff;
@@ -76,7 +76,6 @@ export default {
         color: #ffffff;
         line-height: 42px;
         padding: 60px 0;
-        text-align: left;
     }
     .tabs {
         display: flex;

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

@@ -57,7 +57,6 @@ export default {
 <style lang="less" scoped>
 .container {
     padding: 0 200px;
-
     .title {
         height: 42px;
         font-size: 32px;
@@ -65,7 +64,6 @@ export default {
         color: #ffffff;
         line-height: 42px;
         padding: 60px 0;
-        text-align: left;
     }
     .tabs {
         display: flex;

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

@@ -1,100 +1,94 @@
 <template>
-    <div>
-        <div class="container">
-            <div class="title">游戏数字资产的链上开创者们</div>
-            <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
-            <div class="btn">立即探索</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>
+    <div class="container">
+        <div class="title">游戏数字资产的链上开创者们</div>
+        <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
+        <div class="btn">立即探索</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>
                 </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="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="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>
+            <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="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="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="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 class="describe">
-                <div class="box">
-                    <div class="box1">
-                        <div class="text1">收集</div>
-                        <div class="text2">用稀有和独特的数字宝藏增加库存，成为全球首批游戏数字资产收藏家</div>
-                    </div>
+        </div>
+        <div class="describe">
+            <div class="box">
+                <div class="box1">
+                    <div class="text1">收集</div>
+                    <div class="text2">用稀有和独特的数字宝藏增加库存，成为全球首批游戏数字资产收藏家</div>
                 </div>
-                <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="space">为什么叫第九空间</div>
-            <div class="space2">
-                一切数据皆可复制的时代，第九空间NFT让你拥有一份独家数字藏品，让你拥有一份唯一游戏权益
+        </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="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 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>
@@ -120,7 +114,6 @@ export default {
         color: #ffffff;
         line-height: 42px;
         padding: 130px 0 24px 10px;
-        text-align: left;
     }
     .title2 {
         font-size: 30px;

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

@@ -3,9 +3,7 @@
         <page-header></page-header>
         <el-container direction="vertical">
             <el-main class="main" style="width: 100%; overflow: hidden">
-                <keep-alive>
-                    <router-view />
-                </keep-alive>
+                <keep-alive><router-view /></keep-alive>
             </el-main>
             <el-footer>
                 <div class="footer">
@@ -60,10 +58,12 @@ export default {
     // min-height: 100vh;
 }
 .el-main {
-    min-height: 1000px;
-    background: #0f1111;
+    min-height: 1300px;
+    min-width: 1600px;
+    background: #1a1a1a;
 }
 .el-footer {
+    min-width: 1500px;
     position: relative;
     background: #0f1111;
     height: 170px !important;

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

@@ -0,0 +1,463 @@
+<template>
+    <div class="container">
+        <div class="top">
+            <div>
+                <img class="imgBox" src="../assets/img/888.jpg" alt="" />
+                <div class="works">
+                    <img class="works1" src="../assets/img/icon-quanyibaohu@3x.png" alt="" />
+                    <div class="works2">该作品已在保存至区块链并进行权益保护</div>
+                </div>
+            </div>
+            <div>
+                <div class="title">
+                    <div class="title1">游戏《百分之一》精美皮肤---恶魔的礼物</div>
+                    <div class="text">
+                        <div class="text1">
+                            <img class="img1" src="../assets/img/icon-dianzan@3x.png" alt="" />
+                            <div class="text2">16</div>
+                        </div>
+                        <div class="text1">
+                            <img class="img1" src="../assets/img/fenxiang-icon@3x.png" alt="" />
+                            <div class="text2">分享</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="name">
+                    <img class="name1" src="../assets/img/888.jpg" alt="" />
+                    <div>
+                        <div class="name2">铸造者昵称</div>
+                        <div class="name3">铸造者</div>
+                    </div>
+                    <img class="name4" src="../assets/img/icon_inter@3x (4).png" alt="" />
+                </div>
+                <div class="time">
+                    <div class="time1">卖家定价</div>
+                    <div class="time2">首发抢购倒计时<span>1天 01:35:06</span></div>
+                </div>
+                <div class="price">
+                    <div class="price1">
+                        <div class="price2">价格</div>
+                        <img class="price3" src="../assets/img/icon_jiage@3x.png" alt="" />
+                        <div class="price4">1000</div>
+                        <div class="price2">含<span>5%</span>版税</div>
+                    </div>
+                    <div class="price1 num">
+                        <!-- <div> -->
+                        <div class="price2">数量</div>
+                        <!-- <span class="span">1</span> -->
+                        <!-- </div> -->
+                        <div class="price2">已售 0 / 剩余 50</div>
+                    </div>
+                    <div class="btn">一键预约</div>
+                </div>
+                <div class="time">
+                    <div class="time1">商品特性</div>
+                </div>
+                <div class="card">
+                    <div class="box1">
+                        <div class="a">数字权益卡</div>
+                        <div class="b">打开可见</div>
+                    </div>
+                    <div class="box1">
+                        <div class="a">数字权益卡</div>
+                        <div class="b">打开可见</div>
+                    </div>
+                    <div class="box1">
+                        <div class="a">数字权益卡</div>
+                        <div class="b">打开可见</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="content">
+            <div class="info rad">
+                <div class="info1">
+                    <img class="imgs" src="../assets/img/icon-weixin@3x.png" alt="" />
+                    <div class="info2">链上信息</div>
+                </div>
+                <div class="border"></div>
+                <img
+                    class="info3"
+                    @click="showMore = !showMore"
+                    :src="`https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${
+                        showMore ? '2021-10-28-17-09-42dBlUbhPV.png' : '2021-10-28-17-09-10SvxqPjMw.png'
+                    }`"
+                    alt=""
+                />
+            </div>
+            <div class="info4" v-if="!showMore">
+                <div class="text1">Hash地址：f6b1a265b50717b4b1bae9dc6…</div>
+                <div class="text1">区块高度： 77259404</div>
+                <div class="text1">令牌ID： ID57896044618658097711785492504…</div>
+            </div>
+            <div class="info">
+                <div class="info1">
+                    <img class="imgs" src="../assets/img/icon-weixin@3x.png" alt="" />
+                    <div class="info2">作品描述</div>
+                </div>
+                <div v-if="showMore1" class="border"></div>
+                <img
+                    class="info3"
+                    @click="showMore1 = !showMore1"
+                    :src="`https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${
+                        showMore1 ? '2021-10-28-17-09-42dBlUbhPV.png' : '2021-10-28-17-09-10SvxqPjMw.png'
+                    }`"
+                    alt=""
+                />
+            </div>
+            <div class="info4" v-if="!showMore1">
+                <div class="text1">Hash地址：f6b1a265b50717b4b1bae9dc6…</div>
+                <div class="text1">区块高度： 77259404</div>
+                <div class="text1">令牌ID： ID57896044618658097711785492504…</div>
+            </div>
+            <div class="info">
+                <div class="info1">
+                    <img class="imgs" src="../assets/img/icon-weixin@3x.png" alt="" />
+                    <div class="info2">交易历史</div>
+                </div>
+                <div v-if="showMore2" class="border"></div>
+                <img
+                    class="info3"
+                    @click="showMore2 = !showMore2"
+                    :src="`https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${
+                        showMore2 ? '2021-10-28-17-09-42dBlUbhPV.png' : '2021-10-28-17-09-10SvxqPjMw.png'
+                    }`"
+                    alt=""
+                />
+            </div>
+            <div class="info4 rad1" v-if="!showMore2">
+                <div class="text1">Hash地址：f6b1a265b50717b4b1bae9dc6…</div>
+                <div class="text1">区块高度： 77259404</div>
+                <div class="text1">令牌ID： ID57896044618658097711785492504…</div>
+            </div>
+        </div>
+        <div class="nft">
+            <div class="nft1">
+                <img class="nft2" src="../assets/img/888.jpg" alt="" />
+                <div class="nft3">铸造者昵称</div>
+            </div>
+            <div class="nft4">来自创作者的NFT</div>
+            <div class="nft1">
+                <div class="nft5">查看更多</div>
+                <img class="nft6" src="../assets/img/icon_inter@3x (4).png" alt="" />
+            </div>
+        </div>
+        <goods-info></goods-info>
+    </div>
+</template>
+<script>
+import GoodsInfo from '../components/GoodsInfo.vue';
+export default {
+    components: { GoodsInfo },
+    data() {
+        return {
+            showMore: false,
+            showMore1: false,
+            showMore2: false
+        };
+    },
+    methods: {}
+};
+</script>
+<style lang="less" scoped>
+.container {
+    padding: 50px 200px 0;
+    background: #1a1a1a;
+    .top {
+        display: flex;
+        justify-content: space-between;
+        .imgBox {
+            width: 460px;
+            height: 520px;
+            border-radius: 8px;
+            // margin-right: 30px;
+            border: 2px solid;
+            border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
+        }
+        .works {
+            display: flex;
+            align-items: center;
+            height: 68px;
+            background: #1c1e26;
+            border-radius: 8px;
+            margin-top: 30px;
+            .works1 {
+                width: 24px;
+                height: 24px;
+                margin: 2px 10px 0 16px;
+            }
+            .works2 {
+                font-size: 16px;
+                font-weight: 400;
+                color: #ffffff;
+            }
+        }
+        .title {
+            display: flex;
+            justify-content: space-between;
+            // width: 710px;
+            margin-top: 10px;
+            .title1 {
+                font-size: 26px;
+                font-weight: bold;
+                color: #ffffff;
+            }
+            .text {
+                display: flex;
+                .text1 {
+                    text-align: center;
+                    margin-right: 23px;
+                    .img1 {
+                        width: 24px;
+                        height: 24px;
+                    }
+                    .text2 {
+                        font-size: 16px;
+                        font-weight: 400;
+                        color: #949699;
+                        line-height: 24px;
+                        margin-top: 2px;
+                    }
+                }
+            }
+        }
+        .name {
+            display: flex;
+            align-items: center;
+            height: 64px;
+            line-height: 64px;
+            padding-bottom: 23px;
+
+            .name1 {
+                width: 38px;
+                height: 38px;
+                border-radius: 50%;
+                margin-right: 12px;
+            }
+            .name2 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+            }
+            .name3 {
+                font-size: 12px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 22px;
+            }
+            .name4 {
+                width: 24px;
+                height: 24px;
+                margin-left: 16px;
+            }
+        }
+        .time {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: #1c1e26;
+            border-radius: 8px 8px 0px 0px;
+            // width: 678px;
+            height: 56px;
+            padding: 0 16px;
+            .time1 {
+                font-size: 18px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 24px;
+            }
+            .time2 {
+                font-size: 16px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+            }
+            span {
+                font-size: 16px;
+                font-weight: 400;
+                color: #00ffcb;
+                line-height: 24px;
+                margin-left: 6px;
+            }
+        }
+        .price {
+            // width: 678px;
+            height: 220px;
+            padding: 0 16px;
+            background: #1f2230;
+            border-radius: 0px 0px 8px 8px;
+            margin-bottom: 30px;
+            .price1 {
+                display: flex;
+                padding: 18px 0 24px 0;
+                border-bottom: 1px solid #494a4d;
+                &.num {
+                    justify-content: space-between;
+                    border-bottom: 0;
+                }
+                .span {
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #ffffff;
+                    line-height: 22px;
+                    margin-left: 16px;
+                }
+                .price2 {
+                    font-size: 16px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 24px;
+                }
+                .price3 {
+                    width: 10px;
+                    height: 11px;
+                    margin-left: 10px;
+                    margin: 6px 0 0 10px;
+                }
+                .price4 {
+                    font-size: 40px;
+                    font-weight: normal;
+                    color: #00ffcb;
+                    line-height: 36px;
+                }
+                span {
+                    font-size: 16px;
+                    font-weight: 400;
+                    color: #00ffcb;
+                    line-height: 24px;
+                }
+            }
+            .btn {
+                width: 678px;
+                height: 52px;
+                line-height: 52px;
+                text-align: center;
+                background: linear-gradient(135deg, #00ffcb 0%, #006eff 100%);
+                border-radius: 8px;
+            }
+        }
+        .card {
+            // width: 590px;
+            height: 112px;
+            border-radius: 0px 0px 8px 8px;
+            background: #1f2230;
+            padding: 0 60px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .box1 {
+                width: 120px;
+                height: 62px;
+                text-align: center;
+                border-radius: 4px;
+                border: 1px solid;
+                border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
+                .a {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 24px;
+                    margin-top: 5px;
+                }
+                .b {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #ffffff;
+                    line-height: 24px;
+                }
+            }
+        }
+    }
+    .content {
+        .info {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 16px;
+            background: #1c1e26;
+            &.rad {
+                border-radius: 8px 8px 0px 0px;
+                margin-top: 30px;
+            }
+            .info1 {
+                display: flex;
+                align-items: center;
+                height: 68px;
+                .imgs {
+                    width: 24px;
+                    height: 24px;
+                    margin-right: 10px;
+                }
+                .info2 {
+                    font-size: 16px;
+                    font-weight: 400;
+                    color: #ffffff;
+                    line-height: 24px;
+                }
+            }
+            .border {
+                height: 1px;
+                background: red;
+                border-radius: 1px;
+            }
+            .info3 {
+                width: 24px;
+                height: 24px;
+            }
+        }
+        .info4 {
+            background: #1f2230;
+            padding: 10px 0 20px 16px;
+            &.rad1 {
+                border-radius: 0px 0px 8px 8px;
+            }
+            .text1 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 28px;
+            }
+        }
+    }
+    .nft {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 50px 0 27px;
+        .nft1 {
+            display: flex;
+            align-items: center;
+            .nft2 {
+                width: 38px;
+                height: 38px;
+                border-radius: 50%;
+                margin-right: 12px;
+            }
+            .nft3 {
+                font-size: 16px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+            }
+            .nft5 {
+                font-size: 13px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 18px;
+                margin-top: 2px;
+            }
+            .nft6 {
+                width: 24px;
+                height: 24px;
+            }
+        }
+        .nft4 {
+            font-size: 18px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 30px;
+        }
+    }
+}
+</style>