.

src/main/nine-space/package.json

@@ -15,6 +15,7 @@
     "better-scroll": "^2.4.2",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
+    "echarts": "^4.9.0",
     "html2canvas": "^1.3.2",
     "lodash": "^4.17.21",
     "mathjs": "^9.5.1",
@@ -22,6 +23,7 @@
     "query-string": "^7.0.1",
     "register-service-worker": "^1.7.1",
     "swiper": "^6.8.1",
+    "v-charts": "^1.19.0",
     "vant": "^3.2.3",
     "vconsole": "^3.9.3",
     "vue": "^3.2.20",

src/main/nine-space/src/views/creator/Detail.vue

@@ -298,6 +298,7 @@ export default {
     align-items: center;
     padding: 0 16px;
     border-bottom: 1px solid #202122;
+    background-color: @bg3;
     .menu-item {
         font-size: 16px;
         font-weight: bold;

src/main/nine-space/src/views/product/Detail.vue

@@ -26,8 +26,8 @@
 
         <div class="info">
             <div class="price-line">
-                <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
-                <div class="sub" v-if="info.royalties">
+                <div class="price" v-if="info.salable"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
+                <div class="sub" v-if="info.royalties && info.salable">
                     含 <span>{{ info.royalties }}%</span> 版税
                 </div>
                 <div class="flex1"></div>

src/main/pc-space/package.json

@@ -10,6 +10,7 @@
     "dependencies": {
         "axios": "^0.24.0",
         "core-js": "^3.6.5",
+        "dayjs": "^1.10.7",
         "element-ui": "^2.15.6",
         "qs": "^6.10.1",
         "swiper": "5.x",

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

@@ -31,10 +31,12 @@
                 </div>
             </div>
             <div class="text">
-                <div class="text1">
-                    <img class="text2 text4" src="../assets/img/icon-dianzan@3x.png" alt="" />
+                <!-- <div class="text1">
+                    <img class="text2 text4" src="../assets/img/like.png" alt="" />
                     <div class="text3">16</div>
-                </div>
+                </div> -->
+                <like-button :isLike="info.liked" @like="likeProduct">{{ info.likes }}</like-button>
+
                 <!-- <div class="text1" v-else>
                     <img class="text2 text4" src="../assets/img/icon-yuyue@3x.png" alt="" />
                     <div class="text3">预约</div>
@@ -46,7 +48,9 @@
 
 <script>
 import product from '../mixins/product';
+import LikeButton from './LikeButton.vue';
 export default {
+    components: { LikeButton },
     props: {
         info: {
             type: Object,
@@ -55,7 +59,30 @@ export default {
             }
         }
     },
-    mixins: [product]
+    mixins: [product],
+    methods: {
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: true,
+                        likes: this.info.likes + 1
+                    });
+                    this.$message.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: false,
+                        likes: this.info.likes - 1
+                    });
+                    this.$message.success('取消收藏');
+                });
+            }
+        }
+    }
 };
 </script>
 <style lang="less" scoped>

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

@@ -25,7 +25,7 @@
                     </div>
                     <div class="text">
                         <div class="text1" v-if="flagId !== '1'">
-                            <img class="text2 text4" src="../assets/img/icon-dianzan@3x.png" alt="" />
+                            <img class="text2 text4" src="../assets/img/like.png" alt="" />
                             <div class="text3">16</div>
                         </div>
                         <div class="text1" v-else>

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

@@ -0,0 +1,116 @@
+<template>
+    <div class="like" :class="[size]" @click.prevent="like">
+        <img :src="isLike ? likeImg : disLikeImg" alt="" />
+        <span><slot>16</slot></span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        isLike: {
+            type: Boolean,
+            default: false
+        },
+        size: {
+            type: String,
+            default: 'normal'
+        }
+    },
+    data() {
+        return {
+            likeImg: require('../assets/img/like.png'),
+            disLikeImg: require('../assets/img/dislike.png')
+        };
+    },
+    methods: {
+        like() {
+            this.checkLogin().then(() => {
+                this.$el.children[0].className += 'rubberBand';
+                setTimeout(() => {
+                    this.$el.children[0].className = this.$el.children[0].className.replace(/rubberBand/g, '');
+                }, 1000);
+                this.$emit('like');
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.like {
+    display: inline-block;
+    color: #949699;
+    line-height: 24px;
+    cursor: pointer;
+
+    img {
+        vertical-align: middle;
+        margin-right: 3px;
+        width: 18px;
+        height: 18px;
+        display: inline-block;
+    }
+
+    span {
+        vertical-align: middle;
+    }
+
+    &.large {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        img {
+            width: 24px;
+            height: 24px;
+            margin-right: 0;
+            display: block;
+        }
+        span {
+            font-size: 16px;
+            line-height: 24px;
+            margin-top: 4px;
+        }
+    }
+}
+
+@keyframes rubberBand {
+    from {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+
+    30% {
+        -webkit-transform: scale3d(1.25, 0.75, 1);
+        transform: scale3d(1.25, 0.75, 1);
+    }
+
+    40% {
+        -webkit-transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1);
+    }
+
+    50% {
+        -webkit-transform: scale3d(1.15, 0.85, 1);
+        transform: scale3d(1.15, 0.85, 1);
+    }
+
+    65% {
+        -webkit-transform: scale3d(0.95, 1.05, 1);
+        transform: scale3d(0.95, 1.05, 1);
+    }
+
+    75% {
+        -webkit-transform: scale3d(1.05, 0.95, 1);
+        transform: scale3d(1.05, 0.95, 1);
+    }
+
+    to {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+.rubberBand {
+    animation: rubberBand ease-in-out 1s;
+}
+</style>

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

@@ -222,6 +222,7 @@ export default {
             this.check().then(() => {
                 this.$toast.success('登录成功');
                 this.Show = false;
+                this.$EventBus.$emit('loginSuccess')
             });
         },
         // 验证码登录

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

@@ -1,3 +1,12 @@
+import dayjs from 'dayjs';
+require('dayjs/locale/zh-cn');
+dayjs.locale('zh-cn');
+var relativeTime = require('dayjs/plugin/relativeTime');
+dayjs.extend(relativeTime);
+var calendar = require('dayjs/plugin/calendar');
+dayjs.extend(calendar);
+var duration = require('dayjs/plugin/duration');
+dayjs.extend(duration);
 export default {
     data() {
         return {
@@ -24,7 +33,8 @@ export default {
                     label: '视频',
                     value: 'video/mp4'
                 }
-            ]
+            ],
+            startTime: ''
         };
     },
     methods: {
@@ -39,6 +49,23 @@ export default {
         },
         isVideo(info = {}) {
             return info.type === 'video/mp4';
+        },
+        getTime(startTime) {
+            if (!startTime) {
+                return;
+            }
+            var x = dayjs(startTime);
+            var y = dayjs();
+            let d = dayjs.duration(x.diff(y));
+            let day = parseInt(d.asDays());
+            let str = '';
+            if (day > 0) {
+                str += day + '天 ';
+            }
+            this.startTime = str + dayjs.duration(x.diff(y)).format('HH:mm:ss');
+            setTimeout(() => {
+                this.getTime(startTime);
+            }, 1000);
         }
     }
 };

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

@@ -18,7 +18,7 @@ export default {
                     });
                 } else {
                     this.$http.get(`/user/${info.id}/unfollow`).then(() => {
-                        this.$message.warning('取消关注');
+                        this.$message.success('取消关注');
                         this.changeInfo({
                             ...info,
                             follow: false,
@@ -29,12 +29,12 @@ export default {
             });
         },
         changeInfo(info) {
-            if (!this.isList) {
+            if (this.isList) {
                 let list = [...this.list];
 
-                list.forEach(item => {
+                list.forEach((item, index) => {
                     if (item.id == info.id) {
-                        item = info;
+                        list[index] = info;
                     }
                 });
 

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

@@ -4,9 +4,9 @@ import qs from 'qs';
 let baseUrl = 'http://localhost:8080';
 switch (process.env.NODE_ENV) {
     case 'development':
-        baseUrl = 'https://nft.9space.vip';
+        // baseUrl = 'https://nft.9space.vip';
         // baseUrl = 'http://192.168.50.190:8080';
-        // baseUrl = 'http://localhost:8080';
+        baseUrl = 'http://localhost:8080';
         // baseUrl = 'http://192.168.50.190:8080';
         break;
     case 'test':

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

@@ -28,7 +28,7 @@
         </div>
 
         <div class="list" v-loading="fetchingData">
-            <collection-info v-for="item in list" :key="item.id" :info="item"></collection-info>
+            <collection-info v-for="(item, index) in list" :key="item.id" :info.sync="list[index]"></collection-info>
 
             <el-empty v-if="empty" description="还没有该类型的藏品哦～"></el-empty>
         </div>

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

@@ -1,168 +1,160 @@
 <template>
     <div class="container center-content">
-        <div class="top">
-            <div>
-                <img class="imgBox" src="../assets/img/888.jpg" alt="" />
-                <swiper ref="mySwiper" :options="swiperOptions">
-                    <swiper-slide>Slide 1</swiper-slide>
-                    <swiper-slide>Slide 2</swiper-slide>
-                    <swiper-slide>Slide 3</swiper-slide>
-                    <swiper-slide>Slide 4</swiper-slide>
-                    <swiper-slide>Slide 5</swiper-slide>
+        <div class="top" v-loading="loading">
+            <div class="top-left">
+                <swiper class="mySwiper imgBox" ref="mySwiper" :options="swiperOptions">
+                    <swiper-slide v-for="(item, index) in banners" :key="index">
+                        <video
+                            class="swiper-video"
+                            v-if="isVideo(item)"
+                            :src="item.url"
+                            :poster="getImg(changeImgs([item]))"
+                            controls="controls"
+                        >
+                            您的浏览器不支持 video 标签。
+                        </video>
+                        <el-image
+                            v-else
+                            :src="item.url"
+                            :preview-src-list="changeImgs(banners)"
+                            style="width: 460px; height: 520px"
+                            fit="scale-down"
+                        />
+                    </swiper-slide>
                 </swiper>
                 <div class="works">
                     <img class="works1" src="../assets/img/icon-quanyibaohu@3x.png" alt="" />
                     <div class="works2">该作品已在保存至区块链并进行权益保护</div>
                 </div>
             </div>
-            <div>
+            <div class="top-info">
                 <div class="title">
-                    <div class="title1">游戏《百分之一》精美皮肤---恶魔的礼物</div>
+                    <div class="title1">{{ info.name }}</div>
                     <div class="text">
-                        <div class="text1">
-                            <img class="img1" src="../assets/img/icon-dianzan@3x.png" alt="" />
-                            <div class="text2">16</div>
-                        </div>
+                        <like-button size="large" :isLike="info.liked" @like="likeProduct">
+                            {{ info.likes }}
+                        </like-button>
                         <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="" />
+                <router-link :to="{ path: '/castingDetail', query: { id: info.minterId } }" class="name">
+                    <img class="name1" :src="info.minterAvatar" alt="" />
                     <div>
-                        <div class="name2">铸造者昵称</div>
+                        <div class="name2">{{ info.minter }}</div>
                         <div class="name3">铸造者</div>
                     </div>
                     <img class="name4" src="../assets/img/icon_inter@3x (4).png" alt="" />
-                </div>
+                </router-link>
                 <div class="time">
                     <div class="time1">卖家定价</div>
-                    <div class="time2">首发抢购倒计时<span>1天 01:35:06</span></div>
+                    <div class="time2" v-if="info.startTime">
+                        首发抢购倒计时<span>{{ startTime }}</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 class="price4">{{ info.price }}</div>
+                        <div class="price2" v-if="info.royalties">
+                            含<span>{{ info.royalties }}%</span>版税
+                        </div>
                     </div>
                     <div class="price1 num">
                         <div class="num1">
                             <div class="price2 num2">数量</div>
-                            <span class="span">1</span>
+                            <span class="span">{{ info.total }}</span>
                         </div>
-                        <div class="price2 num2">已售 0 / 剩余 50</div>
+                        <div class="price2 num2">已售 {{ info.sale }} / 剩余 {{ info.stock }}</div>
                     </div>
-                    <div class="btn">一键预约</div>
-                </div>
-                <div class="time">
-                    <div class="time1">商品特性</div>
+                    <el-button class="buy" v-if="info.startTime" type="primary" size="default">一键预约</el-button>
+
+                    <el-button class="buy" v-else-if="isBuy" type="primary" size="default">立即购买</el-button>
                 </div>
-                <div class="card">
-                    <div class="box1">
-                        <div class="box2">数字权益卡</div>
-                        <div class="box3">打开可见</div>
+                <div v-if="properties.length > 0">
+                    <div class="time">
+                        <div class="time1">商品特性</div>
                     </div>
-                    <div class="box1">
-                        <div class="box2">数字权益卡</div>
-                        <div class="box3">打开可见</div>
-                    </div>
-                    <div class="box1">
-                        <div class="box2">数字权益卡</div>
-                        <div class="box3">打开可见</div>
+                    <div class="card">
+                        <div class="box1" v-for="(item, index) in properties" :key="index">
+                            <div class="box2">{{ item.name }}</div>
+                            <div class="box3">{{ item.value }}</div>
+                        </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="content" v-loading="loading">
+            <el-collapse v-model="activeNames" :accordion="false">
+                <el-collapse-item name="1" v-if="info.tokenId">
+                    <template slot="title">
+                        <img class="imgs" src="../assets/icon-lianshangxinxi.png" alt="" />
+                        <span>链上信息</span>
+                    </template>
+                    <div class="info4">
+                        <div class="text1">Hash地址：{{ info.txHash }}</div>
+                        <div class="text1">区块高度： {{ info.blockNumber }}</div>
+                        <div class="text1">令牌ID： {{ info.tokenId }}</div>
+                    </div>
+                </el-collapse-item>
 
-                <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="border" v-if="showMore"></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>
-                <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 v-if="showMore1" class="border"></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>
-                <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 v-if="showMore2" class="border"></div>
-            <div class="info4 rad1" v-if="!showMore2">
-                <template>
+                <el-collapse-item name="2">
+                    <template slot="title">
+                        <img class="imgs" src="../assets/icon-miaoshu.png" alt="" />
+                        <span>作品描述</span>
+                    </template>
+                    <div class="info4">
+                        <swiper class="boxs" :options="boxOptions">
+                            <swiper-slide v-for="(item, index) in boxs" :key="index">
+                                <el-image :src="item" :preview-src-list="boxs" fit="scale-down" />
+                            </swiper-slide>
+                        </swiper>
+                        <div v-html="info.detail"></div>
+                    </div>
+                </el-collapse-item>
+
+                <!-- <el-collapse-item name="3">
+                    <template slot="title">
+                        <img class="imgs" src="../assets/info_icon_jiaoyijilu.png" alt="" />
+                        <span>交易历史</span>
+                    </template>
                     <el-table :data="tableData" stripe style="width: 100%">
                         <el-table-column prop="date" label="日期" width="180"> </el-table-column>
                         <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
                         <el-table-column prop="address" label="地址"> </el-table-column>
                     </el-table>
-                </template>
-            </div>
+                </el-collapse-item> -->
+            </el-collapse>
         </div>
-        <div class="nft">
+        <div class="nft" v-if="relateds.length > 0">
             <div class="nft1">
-                <img class="nft2" src="../assets/img/888.jpg" alt="" />
-                <div class="nft3">铸造者昵称</div>
+                <img class="nft2" :src="info.minterAvatar" alt="" />
+                <div class="nft3">{{ info.minter }}</div>
             </div>
             <div class="nft4">来自创作者的NFT</div>
-            <div class="nft1">
+            <router-link class="nft1" :to="{ path: '/castingDetail', query: { id: info.minterId } }">
                 <div class="nft5">查看更多</div>
                 <img class="nft6" src="../assets/img/icon_inter@3x (4).png" alt="" />
-            </div>
+            </router-link>
+        </div>
+        <div class="list" v-loading="loading" v-if="relateds.length > 0">
+            <collection-info v-for="(item, index) in relateds" :key="item.id" :info.sync="relateds[index]">
+            </collection-info>
         </div>
-        <goods-info></goods-info>
     </div>
 </template>
 <script>
-import GoodsInfo from '../components/GoodsInfo.vue';
-import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
+import product from '../mixins/product';
 import 'swiper/css/swiper.css';
+import LikeButton from '../components/LikeButton.vue';
+import CollectionInfo from '../components/CollectionInfo.vue';
 export default {
-    components: { GoodsInfo, Swiper, SwiperSlide },
+    components: { Swiper, SwiperSlide, LikeButton, CollectionInfo },
+    mixins: [product],
     data() {
         return {
             showMore: false,
@@ -171,7 +163,11 @@ export default {
             tableData: [],
             info: {},
             blindBoxItems: [],
-            swiperOptions: {}
+            swiperOptions: {},
+            activeNames: ['2', '3'],
+            relateds: [],
+            boxOptions: { slidesPerView: 4, spaceBetween: 24, autoplay: true },
+            loading: true
         };
     },
     computed: {
@@ -194,12 +190,20 @@ export default {
     mounted() {
         this.getDetail();
     },
+    watch: {
+        $route() {
+            this.getDetail();
+        }
+    },
     methods: {
         getDetail() {
             this.$http
                 .get('/collection/get/' + this.$route.query.id)
                 .then(res => {
                     this.info = res;
+                    this.loading = false;
+                    this.getTime(res.startTime);
+                    this.getRelated(res.ownerId);
                     if (res.type === 'BLIND_BOX') {
                         return this.$http.post(
                             '/blindBoxItem/all',
@@ -217,24 +221,70 @@ export default {
                 .then(res => {
                     if (res) {
                         this.blindBoxItems = res.content;
+                    } else {
+                        this.blindBoxItems = [];
                     }
                 });
+        },
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.getDetail();
+                    this.$message.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.getDetail();
+                    this.$message.success('取消收藏');
+                });
+            }
+        },
+        getRelated(id) {
+            this.$http
+                .post(
+                    '/collection/all',
+                    {
+                        query: {
+                            del: false,
+                            ownerId: id
+                        },
+                        size: 5,
+                        sort: 'createdAt,desc'
+                    },
+                    {
+                        body: 'json'
+                    }
+                )
+                .then(res => {
+                    let list = [];
+                    res.content.forEach(item => {
+                        if (item.id !== this.info.id && list.length < 4) {
+                            list.push(item);
+                        }
+                    });
+                    this.relateds = list;
+                });
         }
     }
 };
 </script>
 <style lang="less" scoped>
 .container {
-    padding: 50px 0 200px;
+    padding: 50px 50px 200px;
     background: #1a1a1a;
     .top {
         display: flex;
-        justify-content: space-between;
-        .imgBox {
-            .line();
+
+        .top-left {
             width: 460px;
-            height: 520px;
+            flex-shrink: 0;
+        }
+
+        .top-info {
+            flex-grow: 1;
+            margin-left: 30px;
         }
+
         .works {
             display: flex;
             align-items: center;
@@ -255,29 +305,38 @@ export default {
         }
         .title {
             display: flex;
-            justify-content: space-between;
-            // width: 710px;
             margin-top: 10px;
+            padding-right: 100px;
+            position: relative;
             .title1 {
                 font-size: 26px;
                 font-weight: bold;
                 color: #ffffff;
+                .ellipsis();
             }
             .text {
+                position: absolute;
+                right: 24px;
+                top: 0;
                 display: flex;
                 .text1 {
                     text-align: center;
-                    margin-right: 23px;
+                    margin-left: 16px;
+                    cursor: pointer;
+                    display: inline-flex;
+                    align-items: center;
+                    flex-direction: column;
                     .img1 {
                         width: 24px;
                         height: 24px;
+                        display: block;
                     }
                     .text2 {
                         font-size: 16px;
                         font-weight: 400;
                         color: #949699;
                         line-height: 24px;
-                        margin-top: 2px;
+                        margin-top: 4px;
                     }
                 }
             }
@@ -288,6 +347,7 @@ export default {
             height: 64px;
             line-height: 64px;
             padding-bottom: 23px;
+            cursor: pointer;
 
             .name1 {
                 width: 38px;
@@ -344,7 +404,7 @@ export default {
         }
         .price {
             // width: 678px;
-            height: 220px;
+            // height: 220px;
             padding: 0 16px;
             background: #1f2230;
             border-radius: 0px 0px 8px 8px;
@@ -398,7 +458,6 @@ export default {
                 }
             }
             .btn {
-                width: 678px;
                 height: 52px;
                 line-height: 52px;
                 text-align: center;
@@ -478,17 +537,8 @@ export default {
             margin: 0 16px;
         }
         .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;
-            }
+            color: #fff;
+            padding: 16px;
         }
     }
     .nft {
@@ -532,8 +582,85 @@ export default {
     }
 }
 .mySwiper {
-    /deep/.swiper-slide {
-        width: 460px;
+    width: 462px;
+    display: inline-block;
+    .line();
+}
+.buy {
+    width: 100%;
+    display: block;
+    height: 52px;
+    background: linear-gradient(135deg, #00ffcb 0%, #006eff 100%);
+    border-radius: 8px;
+    border-width: 0;
+    color: #000;
+    &:hover {
+        background: linear-gradient(135deg, darken(#00ffcb, 10%), darken(#006eff, 10%));
+    }
+}
+
+/deep/.content {
+    margin-top: 30px;
+    .el-collapse-item__wrap {
+        // border-bottom: 1px solid #494a4d;
+        border-bottom-width: 0;
+    }
+    .el-collapse {
+        border-width: 0;
+    }
+
+    .el-collapse-item__header {
+        background-color: #1c1e26;
+        padding-left: 16px;
+        height: 68px;
+        border-bottom-width: 0;
+        img {
+            width: 24px;
+            height: 24px;
+            margin-right: 10px;
+        }
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 24px;
+    }
+    .el-collapse-item__content {
+        background-color: #1f2230;
+    }
+    .el-table {
+        background-color: transparent;
+        padding: 0 16px;
+        tr {
+            background-color: transparent;
+        }
+        th {
+            background-color: transparent;
+        }
+        &::before {
+            content: none;
+        }
+    }
+
+    .el-collapse-item {
+        &:last-child {
+            .el-collapse-item__wrap {
+                border-width: 0;
+            }
+        }
+    }
+}
+.list {
+    margin: -16px;
+
+    .content {
+        margin: 16px;
+    }
+}
+
+/deep/.boxs {
+    .el-image {
+        width: 100%;
+        height: 310px;
+        border-radius: 12px;
     }
 }
 </style>

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

@@ -3,7 +3,7 @@
         <page-header></page-header>
         <el-container direction="vertical" style="padding: 0" class="page-content">
             <el-main class="main">
-                <router-view />
+                <router-view v-if="!loading" />
             </el-main>
             <el-footer>
                 <div class="footer center-content">
@@ -50,7 +50,20 @@
 <script>
 import PageHeader from '../components/PageHeader.vue';
 export default {
-    components: { PageHeader }
+    data() {
+        return {
+            loading: false
+        };
+    },
+    components: { PageHeader },
+    mounted() {
+        this.$EventBus.$on('loginSuccess', () => {
+            this.loading = true;
+            setTimeout(() => {
+                this.loading = false;
+            }, 1000);
+        });
+    }
 };
 </script>
 <style lang="less" scoped>

src/main/pc-space/yarn.lock

@@ -3023,6 +3023,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dayjs@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.nlark.com/de-indent/download/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -8443,7 +8448,7 @@ vue-router@^3.2.0:
   resolved "https://registry.npmmirror.com/vue-router/download/vue-router-3.5.2.tgz?cache=0&sync_timestamp=1634663514839&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-router%2Fdownload%2Fvue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
   integrity sha1-X1Xj8lGXDjbD6NiKfNLWejUK3lw=
 
-vue-social-share@^0.0.3:
+vue-social-share@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/vue-social-share/-/vue-social-share-0.0.3.tgz#901dd165d4750214976dec053101abb51abb3868"
   integrity sha1-kB3RZdR1AhSXbewFMQGrtRq7OGg=