Home Explore Help
Register Sign In
licailing
/
modern_point
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge branch 'master' of http://git.izouma.com/xiongzhu/9th

xuqiang 4 years ago
parent
88187cc854 96b9facb79
commit
2b0cadcc44
21 changed files with 559 additions and 344 deletions
Split View Show Diff Stats
  1. 1 1
      src/main/pc-space/public/index.html
  2. 7 0
      src/main/pc-space/src/App.vue
  3. BIN
      src/main/pc-space/src/assets/defaultBg.jpg
  4. BIN
      src/main/pc-space/src/assets/img_default_photo.png
  5. 2 1
      src/main/pc-space/src/components/PageHeader.vue
  6. 1 2
      src/main/pc-space/src/main.js
  7. 5 9
      src/main/pc-space/src/mixins/common.js
  8. 23 1
      src/main/pc-space/src/mixins/pageableTable.js
  9. 47 0
      src/main/pc-space/src/mixins/user.js
  10. 21 1
      src/main/pc-space/src/router/index.js
  11. 10 1
      src/main/pc-space/src/styles/app.less
  12. 8 0
      src/main/pc-space/src/styles/common.less
  13. 237 0
      src/main/pc-space/src/styles/list.less
  14. 0 1
      src/main/pc-space/src/views/Blindsbox.vue
  15. 28 236
      src/main/pc-space/src/views/Casting.vue
  16. 9 0
      src/main/pc-space/src/views/CastingDetail.vue
  17. 140 70
      src/main/pc-space/src/views/Collection.vue
  18. 7 6
      src/main/pc-space/src/views/Home.vue
  19. 12 13
      src/main/pc-space/src/views/Index.vue
  20. 0 1
      src/main/pc-space/src/views/My.vue
  21. 1 1
      src/main/pc-space/src/views/StoreDetail.vue

+ 1 - 1
src/main/pc-space/public/index.html
View File 

@@ -6,7 +6,7 @@
 
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 
         <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 
         <title><%= htmlWebpackPlugin.options.title %></title>
 
-        <link rel="stylesheet" href="https://at.alicdn.com/t/font_2852142_34ed1mq1h33.css" />
 
+        <link rel="stylesheet" href="https://at.alicdn.com/t/font_2852142_86r1qgys8y5.css" />
 
     </head>
 
     <body>
 
         <noscript>

+ 7 - 0
src/main/pc-space/src/App.vue
View File 

@@ -3,3 +3,10 @@
 
         <router-view />
 
     </div>
 
 </template>
 
+
 
+<style lang="less" scoped>
 
+#app {
 
+    background: #1a1a1a;
 
+    min-width: 1300px;
 
+}
 
+</style>

BIN
src/main/pc-space/src/assets/defaultBg.jpg
View File


BIN
src/main/pc-space/src/assets/img_default_photo.png
View File


+ 2 - 1
src/main/pc-space/src/components/PageHeader.vue
View File 

@@ -53,7 +53,8 @@ export default {
 
 .container {
 
     height: 90px;
 
     background: #0f1111;
 
-    min-width: 1400px;
 
+    // min-width: 1400px;
 
+    width: 100%;
 
     .header {
 
         display: flex;
 
         align-items: center;

+ 1 - 2
src/main/pc-space/src/main.js
View File 

@@ -7,7 +7,6 @@ import ElementUI from 'element-ui';
 
 import 'element-ui/lib/theme-chalk/index.css';

 import common from './mixins/common';

 ElementUI.Dialog.props.closeOnClickModal.default = false;

-import './styles/common.less';

 import './styles/font.less';

 import './styles/app.less';

 

@@ -17,7 +16,7 @@ Vue.prototype.$colors = {
 
 };

 Vue.use(ElementUI);

 Vue.use(http);

-Vue.use(common);

+Vue.mixin(common);

 

 Vue.config.productionTip = false;

+ 5 - 9
src/main/pc-space/src/mixins/common.js
View File 

@@ -80,15 +80,11 @@ export default {
 
             if (this.isLogin) {
 
                 return Promise.resolve();
 
             } else {
 
-                this.$dialog
 
-                    .confirm({
 
-                        title: '提示',
 
-                        message: '用户未登录,是否立即登录',
 
-                        confirmButtonText: '立即登录'
 
-                    })
 
-                    .then(() => {
 
-                        this.$router.push('/login');
 
-                    });
 
+                this.$confirm('用户未登录,是否立即登录', '提示', {
 
+                    confirmButtonText: '立即登录'
 
+                }).then(() => {
 
+                    this.$router.push('/login');
 
+                });
 
                 return Promise.reject();
 
             }
 
         },

+ 23 - 1
src/main/pc-space/src/mixins/pageableTable.js
View File 

@@ -9,7 +9,8 @@ export default {
 
             sortStr: 'createdAt,desc',
 
             tableHeight: 200,
 
             fetchingData: true,
 
-            empty: false
 
+            empty: false,
 
+            isFirst: false
 
         };
 
     },
 
     created() {
 
@@ -25,6 +26,7 @@ export default {
 
             this.sort = sort;
 
         }
 
         if (!this.init) {
 
+            this.isFirst = true;
 
             this.getData();
 
         }
 
     },
 
@@ -74,7 +76,16 @@ export default {
 
                     if (this.afterGetData) {
 
                         this.afterGetData(res);
 
                     }
 
+
 
                     this.empty = res.empty;
 
+                    if (this.$refs.anchor && !this.isFirst) {
 
+                        window.scrollTo({
 
+                            top: this.$refs.anchor.offsetTop,
 
+                            behavior: 'smooth'
 
+                        });
 
+                    }
 
+
 
+                    this.isFirst = false;
 
                 })
 
                 .catch(e => {
 
                     this.fetchingData = false;
 
@@ -158,6 +169,17 @@ export default {
 
         }
 
     },
 
     watch: {
 
+        sortStr() {
 
+            this.$router
 
+                .replace({
 
+                    query: {
 
+                        ...this.$route.query,
 
+                        sort: this.sortStr
 
+                    }
 
+                })
 
+                .catch(() => {});
 
+            this.getData();
 
+        },
 
         sort() {
 
             let sortStr = [];
 
             for (let [key, value] of Object.entries(this.sort)) {

+ 47 - 0
src/main/pc-space/src/mixins/user.js
View File 

@@ -0,0 +1,47 @@
 
+export default {
 
+    data() {
 
+        return {
 
+            isList: true
 
+        };
 
+    },
 
+    methods: {
 
+        like(info) {
 
+            this.checkLogin().then(() => {
 
+                if (!this.info.follow) {
 
+                    this.$http.get(`/user/${info.id}/follow`).then(res => {
 
+                        this.$message.success('关注成功');
 
+                        this.changeInfo({
 
+                            ...info,
 
+                            follow: true,
 
+                            followers: info.followers + 1
 
+                        });
 
+                    });
 
+                } else {
 
+                    this.$http.get(`/user/${info.id}/unfollow`).then(() => {
 
+                        this.$message.warning('取消关注');
 
+                        this.changeInfo({
 
+                            ...info,
 
+                            follow: false,
 
+                            followers: info.followers - 1
 
+                        });
 
+                    });
 
+                }
 
+            });
 
+        },
 
+        changeInfo(info) {
 
+            if (this.isList) {
 
+                let list = [...this.list];
 
+
 
+                list.forEach(item => {
 
+                    if (item.id == info.id) {
 
+                        item = info;
 
+                    }
 
+                });
 
+
 
+                this.list = list;
 
+            } else {
 
+                this.getInfo();
 
+            }
 
+        }
 
+    }
 
+};

+ 21 - 1
src/main/pc-space/src/router/index.js
View File 

@@ -32,6 +32,14 @@ const routes = [
 
                     title: '铸造'
 
                 }
 
             },
 
+            {
 
+                path: '/castingDetail',
 
+                name: 'castingDetail',
 
+                component: () => import('../views/CastingDetail.vue'),
 
+                meta: {
 
+                    title: '铸造'
 
+                }
 
+            },
 
             {
 
                 path: '/collection',
 
                 name: 'collection',
 
@@ -71,7 +79,19 @@ const routes = [
 
 const router = new VueRouter({
 
     mode: 'history',
 
     base: process.env.BASE_URL,
 
-    routes
 
+    routes,
 
+    scrollBehavior(to, from, savedPosition) {
 
+        console.log(savedPosition);
 
+        if (to.path !== from.path) {
 
+            if (savedPosition) {
 
+                return savedPosition;
 
+            }
 
+        }
 
+        return {
 
+            x: 0,
 
+            y: 0
 
+        };
 
+    }
 
 });
 
 
 export default router;

+ 10 - 1
src/main/pc-space/src/styles/app.less
View File 

@@ -22,7 +22,7 @@ a {
 
 }
 
 
 .center-content {
 
-    // .center-content();
 
+    .center-content();
 
 }
 
 
 // .el-dialog {
 
@@ -182,3 +182,12 @@ body {
 
     overflow: hidden;
 
 }
 
 
+.list {
 
+    .el-empty {
 
+        padding: 300px 0;
 
+    }
 
+}
 
+
 
+.el-loading-mask {
 
+    background-color: rgba(255, 255, 255, 0.2);
 
+}

+ 8 - 0
src/main/pc-space/src/styles/common.less
View File 

@@ -168,3 +168,11 @@
 
         }
 
     }
 
 }
 
+
 
+.center-content( @width:1300px ) {
 
+    width: 100%;
 
+    box-sizing: border-box;
 
+    padding: 0 50px;
 
+    max-width: @width;
 
+    margin: 0 auto;
 
+}

+ 237 - 0
src/main/pc-space/src/styles/list.less
View File 

@@ -0,0 +1,237 @@
 
+.container {
 
+    background: #1a1a1a;
 
+    .center-content();
 
+    .search {
 
+        background: #1a1a1a;
 
+        width: 280px;
 
+        height: 42px;
 
+        border-radius: 8px;
 
+        margin: 30px 0 50px;
 
+
 
+        /deep/.el-input__inner {
 
+            border: 1px solid #898989;
 
+            background-color: transparent;
 
+            color: #fff;
 
+            border-radius: 8px;
 
+            &:focus {
 
+                border-color: #fff;
 
+            }
 
+        }
 
+    }
 
+    .title {
 
+        height: 42px;
 
+        font-size: 32px;
 
+        color: #ffffff;
 
+        line-height: 42px;
 
+        padding: 60px 0;
 
+        font-family: ZhenyanGB;
 
+    }
 
+    .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;
 
+    }
 
+    .content {
 
+        width: 276px;
 
+        height: 416px;
 
+        // height: 416px;
 
+        .line(@radius:8px);
 
+        display: inline-block;
 
+        margin: 16px;
 
+        .imgBox {
 
+            height: 160px;
 
+            width: 100%;
 
+            border-radius: 8px 8px 0px 0px;
 
+        }
 
+        .img {
 
+            padding: 5px;
 
+            width: 88px;
 
+            height: 88px;
 
+            background: #ffffff;
 
+            border-radius: 65px;
 
+            position: absolute;
 
+            top: 100px;
 
+            right: 90px;
 
+        }
 
+        .text {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            .name {
 
+                height: 24px;
 
+                font-size: 16px;
 
+                font-weight: bold;
 
+                color: #ffffff;
 
+                line-height: 24px;
 
+                margin-top: 50px;
 
+                padding-right: 6px;
 
+                &.name1 {
 
+                    font-size: 14px;
 
+                    font-weight: 400;
 
+                    color: #949699;
 
+                    line-height: 24px;
 
+                    margin-top: 0;
 
+                }
 
+            }
 
+            .img1 {
 
+                width: 18px;
 
+                height: 18px;
 
+                margin-top: 50px;
 
+                &.img2 {
 
+                    margin-top: 0;
 
+                }
 
+            }
 
+        }
 
+        .introduce {
 
+            margin: 10px 16px 16px;
 
+            height: 60px;
 
+            font-size: 14px;
 
+            font-weight: 400;
 
+            color: #939599;
 
+            line-height: 20px;
 
+            .ellipsis-line(3);
 
+        }
 
+        .fans {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+            padding: 10px 16px 20px;
 
+            .followers {
 
+                display: flex;
 
+                flex-direction: column;
 
+                align-items: center;
 
+            }
 
+            .text3 {
 
+                font-size: 16px;
 
+                font-weight: 400;
 
+                color: #ffffff;
 
+                line-height: 24px;
 
+            }
 
+            .text4 {
 
+                font-size: 14px;
 
+                font-weight: 400;
 
+                color: #939599;
 
+                line-height: 24px;
 
+            }
 
+            .follow {
 
+                width: 70px;
 
+                height: 26px;
 
+                color: #00ffcb;
 
+                font-size: 14px;
 
+                border-radius: 16px;
 
+                border: 1px solid;
 
+                text-align: center;
 
+                line-height: 26px;
 
+                // &::before {
 
+                //     color: red;
 
+                // }
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+/deep/.menu {
 
+    .el-radio-button__inner {
 
+        border-color: #949699;
 
+        background-color: transparent;
 
+        color: #949699;
 
+        width: 140px;
 
+    }
 
+    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
 
+        background: linear-gradient(46deg, #00ffcb 0%, #006eff 100%);
 
+        color: #fff;
 
+        border-color: #fff;
 
+    }
 
+    .el-radio-button {
 
+        &:last-child {
 
+            .el-radio-button__inner {
 
+                border-radius: 0 8px 8px 0;
 
+            }
 
+        }
 
+        &:first-child {
 
+            .el-radio-button__inner {
 
+                border-radius: 8px 0 0 8px;
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+.list {
 
+    margin: -16px -16px;
 
+    min-height: 800px;
 
+}
 
+
 
+.radio-item {
 
+    .flex();
 
+    justify-content: center;
 
+    font-size: 16px;
 
+
 
+    .font_family {
 
+        font-size: 20px;
 
+        margin-right: 6px;
 
+    }
 
+}
 
+
 
+.pagination-wrapper {
 
+    display: flex;
 
+    justify-content: center;
 
+    margin: 80px auto;
 
+
 
+    /deep/.el-pagination {
 
+        button:disabled {
 
+            background-color: transparent;
 
+            color: #939599;
 
+        }
 
+
 
+        .btn-next,
 
+        .btn-prev {
 
+            background: transparent;
 
+            color: #939599;
 
+        }
 
+        .el-pager li {
 
+            background-color: transparent;
 
+            color: #939599;
 
+            &.active {
 
+                color: @prim;
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+.search-list {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+
 
+    .select {
 
+        /deep/.el-input__inner {
 
+            background-color: transparent;
 
+        }
 
+    }
 
+}
 
+

+ 0 - 1
src/main/pc-space/src/views/Blindsbox.vue
View File 

@@ -18,7 +18,6 @@ export default {
 
 </script>
 
 <style lang="less" scoped>
 
 .container {
 
-    padding: 0 200px;
 
 
     .title {
 
         height: 42px;

+ 28 - 236
src/main/pc-space/src/views/Casting.vue
View File 

@@ -1,6 +1,6 @@
 
 <template>
 
     <div class="container">
 
-        <div class="title">游戏数字资产的链上开创者们</div>
 
+        <div class="title" ref="anchor">游戏数字资产的链上开创者们</div>
 
         <!-- <div class="tabs">
 
             <div
 
                 class="tab"
 
@@ -28,32 +28,43 @@
 
             placeholder="请输入您想找到的作者名称…"
 
             v-model="search"
 
             clearable
 
+            @change="getData"
 
         >
 
         </el-input>
 
-        <div class="list">
 
-            <div class="content" v-for="item in list" :key="item.id">
 
-                <img class="imgBox" src="../assets/img/888.jpg" alt="" />
 
-                <img class="img" src="../assets/img/888.jpg" alt="" />
 
+        <div class="list" v-loading="fetchingData">
 
+            <router-link
 
+                :to="{ path: '/castingDetail?id=' + item.id }"
 
+                class="content"
 
+                v-for="item in list"
 
+                :key="item.id"
 
+            >
 
+                <el-image
 
+                    class="imgBox"
 
+                    :src="item.bg || require('../assets/defaultBg.jpg')"
 
+                    fit="cover"
 
+                    :lazy="true"
 
+                ></el-image>
 
+                <img class="img" :src="item.avatar || require('../assets/img_default_photo.png')" alt="" />
 
                 <div class="text">
 
-                    <div class="name">创作者姓名</div>
 
+                    <div class="name">{{ item.nickname }}</div>
 
                     <img class="img1" src="../assets/img/renzheng_icon@3x.png" alt="" />
 
                 </div>
 
                 <div class="text">
 
-                    <div class="name name1">338392</div>
 
+                    <div class="name name1">{{ item.id }}</div>
 
                     <img class="img1 img2" src="../assets/img/copy_icon@3x.png" alt="" />
 
                 </div>
 
-                <div class="introduce">
 
-                    介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍
 
-                </div>
 
+                <div class="introduce">{{ item.intro || '该用户什么都没留下...' }}</div>
 
                 <div class="border"></div>
 
                 <div class="fans">
 
-                    <div>
 
-                        <div class="text3">2111</div>
 
+                    <div class="followers">
 
+                        <div class="text3">{{ item.followers }}</div>
 
                         <div class="text4">粉丝</div>
 
                     </div>
 
-                    <div class="follow">关注</div>
 
+                    <div class="follow" @click.prevent="like(item)">{{ item.follow ? '已关注' : '关注' }}</div>
 
                 </div>
 
-            </div>
 
+            </router-link>
 
+
 
+            <el-empty v-if="empty" description="还没有该类型的开发者哦～"></el-empty>
 
         </div>
 
 
         <div class="pagination-wrapper">
 
@@ -72,6 +83,7 @@
 
 </template>
 
 <script>
 
 import pageableTable from '../mixins/pageableTable';
 
+import user from '../mixins/user';
 
 export default {
 
     data() {
 
         return {
 
@@ -103,11 +115,8 @@ export default {
 
             list: []
 
         };
 
     },
 
-    mixins: [pageableTable],
 
+    mixins: [pageableTable, user],
 
     methods: {
 
-        tab(item) {
 
-            this.active = item;
 
-        },
 
         beforeGetData() {
 
             return { search: this.search, query: { hasRole: 'ROLE_MINTER' } };
 
         },
 
@@ -118,222 +127,5 @@ export default {
 
 };
 
 </script>
 
 <style lang="less" scoped>
 
-.container {
 
-    padding: 0 200px;
 
-    background: #1a1a1a;
 
-    .search {
 
-        background: #1a1a1a;
 
-        width: 280px;
 
-        height: 42px;
 
-        border-radius: 8px;
 
-        margin: 30px 0 50px;
 
-
 
-        /deep/.el-input__inner {
 
-            border: 1px solid #898989;
 
-            background-color: transparent;
 
-            color: #fff;
 
-            border-radius: 8px;
 
-            &:focus {
 
-                border-color: #fff;
 
-            }
 
-        }
 
-    }
 
-    .title {
 
-        height: 42px;
 
-        font-size: 32px;
 
-        color: #ffffff;
 
-        line-height: 42px;
 
-        padding: 60px 0;
 
-        font-family: ZhenyanGB;
 
-    }
 
-    .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;
 
-    }
 
-    .content {
 
-        width: 276px;
 
-        height: 416px;
 
-        // height: 416px;
 
-        .line();
 
-        display: inline-block;
 
-        margin: 15px;
 
-        .imgBox {
 
-            height: 160px;
 
-            width: 100%;
 
-            border-radius: 8px 8px 0px 0px;
 
-        }
 
-        .img {
 
-            padding: 5px;
 
-            width: 88px;
 
-            height: 88px;
 
-            background: #ffffff;
 
-            border-radius: 65px;
 
-            position: absolute;
 
-            top: 100px;
 
-            right: 90px;
 
-        }
 
-        .text {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            .name {
 
-                height: 24px;
 
-                font-size: 16px;
 
-                font-weight: bold;
 
-                color: #ffffff;
 
-                line-height: 24px;
 
-                margin-top: 50px;
 
-                padding-right: 6px;
 
-                &.name1 {
 
-                    font-size: 14px;
 
-                    font-weight: 400;
 
-                    color: #949699;
 
-                    line-height: 24px;
 
-                    margin-top: 0;
 
-                }
 
-            }
 
-            .img1 {
 
-                width: 18px;
 
-                height: 18px;
 
-                margin-top: 50px;
 
-                &.img2 {
 
-                    margin-top: 0;
 
-                }
 
-            }
 
-        }
 
-        .introduce {
 
-            margin: 10px 16px 16px;
 
-            height: 60px;
 
-            font-size: 14px;
 
-            font-weight: 400;
 
-            color: #939599;
 
-            line-height: 20px;
 
-            .ellipsis-line(3);
 
-        }
 
-        .fans {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            padding: 10px 16px 20px;
 
-            .text3 {
 
-                font-size: 16px;
 
-                font-weight: 400;
 
-                color: #ffffff;
 
-                line-height: 24px;
 
-            }
 
-            .text4 {
 
-                font-size: 14px;
 
-                font-weight: 400;
 
-                color: #939599;
 
-                line-height: 24px;
 
-            }
 
-            .follow {
 
-                width: 70px;
 
-                height: 26px;
 
-                color: #00ffcb;
 
-                font-size: 14px;
 
-                border-radius: 16px;
 
-                border: 1px solid;
 
-                text-align: center;
 
-                line-height: 26px;
 
-                // &::before {
 
-                //     color: red;
 
-                // }
 
-            }
 
-        }
 
-    }
 
-}
 
-
 
-/deep/.menu {
 
-    .el-radio-button__inner {
 
-        border-color: #949699;
 
-        background-color: transparent;
 
-        color: #949699;
 
-        width: 140px;
 
-    }
 
-    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
 
-        background: linear-gradient(46deg, #00ffcb 0%, #006eff 100%);
 
-        color: #fff;
 
-        border-color: #fff;
 
-    }
 
-    .el-radio-button {
 
-        &:last-child {
 
-            .el-radio-button__inner {
 
-                border-radius: 0 8px 8px 0;
 
-            }
 
-        }
 
-        &:first-child {
 
-            .el-radio-button__inner {
 
-                border-radius: 8px 0 0 8px;
 
-            }
 
-        }
 
-    }
 
-}
 
-
 
-.list {
 
-    margin: -16px -35px;
 
-}
 
-
 
-.radio-item {
 
-    .flex();
 
-    justify-content: center;
 
-    font-size: 16px;
 
-
 
-    .font_family {
 
-        font-size: 20px;
 
-        margin-right: 6px;
 
-    }
 
-}
 
-
 
-.pagination-wrapper {
 
-    display: flex;
 
-    justify-content: center;
 
-    margin: 80px auto;
 
-
 
-    /deep/.el-pagination {
 
-        button:disabled {
 
-            background-color: transparent;
 
-            color: #939599;
 
-        }
 
-
 
-        .btn-next,
 
-        .btn-prev {
 
-            background: transparent;
 
-            color: #939599;
 
-        }
 
-        .el-pager li {
 
-            background-color: transparent;
 
-            color: #939599;
 
-            &.active {
 
-                color: @prim;
 
-            }
 
-        }
 
-    }
 
-}
 
+@import url('../styles/list.less');
 
 </style>

+ 9 - 0
src/main/pc-space/src/views/CastingDetail.vue
View File 

@@ -0,0 +1,9 @@
 
+<template>
 
+    <div></div>
 
+</template>
 
+
 
+<script>
 
+export default {};
 
+</script>
 
+
 
+<style></style>

+ 140 - 70
src/main/pc-space/src/views/Collection.vue
View File 

@@ -1,6 +1,6 @@
 
 <template>
 
     <div class="container">
 
-        <div class="title">欢迎来到 NFT 市场</div>
 
+        <div class="title" ref="anchor">欢迎来到 NFT 市场</div>
 
         <div class="tabs">
 
             <div
 
                 class="tab"
 
@@ -12,92 +12,162 @@
 
                 {{ item }}
 
             </div>
 
         </div>
 
-        <div class="border"></div>
 
-        <search-info></search-info>
 
-        <goods-info></goods-info>
 
-        <!-- <div>
 
+        <el-radio-group class="menu" v-model="type" size="normal">
 
+            <el-radio-button v-for="(item, index) in typeList" :key="index" :label="item.value">
 
+                <div class="radio-item">
 
+                    <i class="font_family" :class="[item.icon]"></i>
 
+                    <span>{{ item.label }}</span>
 
+                </div>
 
+            </el-radio-button>
 
+        </el-radio-group>
 
+
 
+        <div class="border" style="margin-top: 30px"></div>
 
+        <div class="search-list">
 
+            <el-input
 
+                class="search"
 
+                prefix-icon="el-icon-search"
 
+                placeholder="请输入您想找到的作品名称…"
 
+                v-model="search"
 
+                clearable
 
+                @change="getData"
 
+            >
 
+            </el-input>
 
+            <el-select class="select" v-model="sortStr" placeholder="请选择">
 
+                <el-option v-for="item in sortList" :key="item.value" :label="item.label" :value="item.value">
 
+                </el-option>
 
+            </el-select>
 
+        </div>
 
+
 
+        <div class="list" v-loading="fetchingData">
 
+            <router-link
 
+                :to="{ path: '/castingDetail?id=' + item.id }"
 
+                class="content"
 
+                v-for="item in list"
 
+                :key="item.id"
 
+            >
 
+                <el-image
 
+                    class="imgBox"
 
+                    :src="item.bg || require('../assets/defaultBg.jpg')"
 
+                    fit="cover"
 
+                    :lazy="true"
 
+                ></el-image>
 
+                <img class="img" :src="item.avatar || require('../assets/img_default_photo.png')" alt="" />
 
+                <div class="text">
 
+                    <div class="name">{{ item.nickname }}</div>
 
+                    <img class="img1" src="../assets/img/renzheng_icon@3x.png" alt="" />
 
+                </div>
 
+                <div class="text">
 
+                    <div class="name name1">{{ item.id }}</div>
 
+                    <img class="img1 img2" src="../assets/img/copy_icon@3x.png" alt="" />
 
+                </div>
 
+                <div class="introduce">{{ item.intro || '该用户什么都没留下...' }}</div>
 
+                <div class="border"></div>
 
+                <div class="fans">
 
+                    <div class="followers">
 
+                        <div class="text3">{{ item.followers }}</div>
 
+                        <div class="text4">粉丝</div>
 
+                    </div>
 
+                    <div class="follow" @click.prevent="like(item)">{{ item.follow ? '已关注' : '关注' }}</div>
 
+                </div>
 
+            </router-link>
 
+
 
+            <el-empty v-if="empty" description="还没有该类型的藏品哦～"></el-empty>
 
+        </div>
 
+
 
+        <div class="pagination-wrapper">
 
             <el-pagination
 
-                @size-change="handleSizeChange"
 
-                @current-change="handleCurrentChange"
 
-                :current-page="currentPage4"
 
+                @size-change="onSizeChange"
 
+                @current-change="onCurrentChange"
 
+                :current-page="page"
 
                 :page-sizes="[10, 20, 30, 40, 50]"
 
-                :page-size="100"
 
-                layout="total, sizes, prev, pager, next, jumper"
 
-                :total="400"
 
+                :page-size="pageSize"
 
+                layout="total, prev, pager, next"
 
+                :total="totalElements"
 
             >
 
             </el-pagination>
 
-        </div> -->
 
+        </div>
 
     </div>
 
 </template>
 
 <script>
 
-import GoodsInfo from '../components/GoodsInfo.vue';
 
-import SearchInfo from '../components/SearchInfo.vue';
 
+import pageableTable from '../mixins/pageableTable';
 
 export default {
 
-    components: { GoodsInfo, SearchInfo },
 
     data() {
 
         return {
 
-            tabs: ['全部', '新品', '转让', '拍卖'],
 
-            active: '全部',
 
-            currentPage4: 4
 
+            typeList: [
 
+                {
 
+                    label: '全部',
 
+                    icon: 'icon-icon-quanbu',
 
+                    value: ''
 
+                },
 
+                {
 
+                    label: '新品',
 
+                    icon: 'icon-icon-zuixin',
 
+                    value: 'DEFAULT'
 
+                },
 
+                {
 
+                    label: '盲盒',
 
+                    icon: 'icon-icon-zhuanrang',
 
+                    value: 'BLIND_BOX'
 
+                },
 
+                {
 
+                    label: '拍卖',
 
+                    icon: 'icon-icon-paimai',
 
+                    value: 'AUCTION'
 
+                }
 
+            ],
 
+            sortList: [
 
+                {
 
+                    label: '综合排序',
 
+                    value: 'createdAt,desc'
 
+                },
 
+                {
 
+                    label: '热门排序',
 
+                    value: 'likes,desc'
 
+                },
 
+                {
 
+                    label: '价格降序',
 
+                    value: 'price,desc'
 
+                },
 
+                {
 
+                    label: '价格升序',
 
+                    value: 'price,asc'
 
+                }
 
+            ],
 
+            search: '',
 
+            type: '',
 
+            url: '/collection/all',
 
+            list: []
 
         };
 
     },
 
+    mixins: [pageableTable],
 
+    watch: {
 
+        type() {
 
+            this.$router
 
+                .replace({
 
+                    query: {
 
+                        ...this.$route.query,
 
+                        type: this.type
 
+                    }
 
+                })
 
+                .catch(() => {});
 
+            this.getData();
 
+        }
 
+    },
 
     methods: {
 
-        tab(item) {
 
-            this.active = item;
 
+        beforeGetData() {
 
+            return {
 
+                search: this.search,
 
+                query: {
 
+                    type: this.type
 
+                }
 
+            };
 
         },
 
-        handleSizeChange(val) {
 
-            console.log(`每页 ${val} 条`);
 
-        },
 
-        handleCurrentChange(val) {
 
-            console.log(`当前页: ${val}`);
 
+        setList(list) {
 
+            this.list = list;
 
         }
 
     }
 
 };
 
 </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;
 
-    }
 
-    .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;
 
-    // }
 
-}
 
+@import url('../styles/list.less');
 
 </style>

+ 7 - 6
src/main/pc-space/src/views/Home.vue
View File 

@@ -1,14 +1,16 @@
 
 <template>
 
     <div class="container">
 
         <div class="top">
 
-            <div class="title">游戏数字资产的链上开创者们</div>
 
-            <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
 
-            <div class="btn">立即探索</div>
 
+            <div class="center-content">
 
+                <div class="title">游戏数字资产的链上开创者们</div>
 
+                <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
 
+                <div class="btn">立即探索</div>
 
+            </div>
 
         </div>
 
 
         <!-- <div class="card">33222</div> -->
 
 
-        <div class="introduce">
 
+        <div class="introduce center-content">
 
             <div class="introduce2">
 
                 <img class="img1" src="../assets/img/888.jpg" alt="" />
 
                 <div>
 
@@ -119,7 +121,6 @@ export default {
 
 <style lang="less" scoped>
 
 .container {
 
     .top {
 
-        padding: 0 200px;
 
         background: #0f1111;
 
         height: 460px;
 
         .title {
 
@@ -153,7 +154,7 @@ export default {
 
     }
 
 }
 
 .introduce {
 
-    padding: 0 200px;
 
+    // padding: 0 200px;
 
     display: flex;
 
     align-items: center;
 
     justify-content: space-between;

+ 12 - 13
src/main/pc-space/src/views/Index.vue
View File 

@@ -1,9 +1,11 @@
 
 <template>
 
-    <el-container id="app" direction="vertical">
 
+    <el-container direction="vertical">
 
         <page-header></page-header>
 
         <el-container direction="vertical">
 
             <el-main class="main" style="width: 100%; overflow: hidden">
 
                 <!-- <keep-alive><router-view /></keep-alive> -->
 
+        <el-container direction="vertical" style="padding: 0" class="page-content">
 
+            <el-main class="main">
 
                 <router-view />
 
             </el-main>
 
             <el-footer>
 
@@ -55,28 +57,25 @@ export default {
 
 };
 
 </script>
 
 <style lang="less" scoped>
 
-#app {
 
-    // min-height: 100vh;
 
-}
 
-.el-main {
 
-    min-height: 1300px;
 
-    min-width: 1600px;
 
+.main {
 
+    // min-height: 1300px;
 
     background: #1a1a1a;
 
-    padding: 0 !important;
 
+    padding: 0;
 
 }
 
 .el-footer {
 
-    min-width: 1500px;
 
+    width: 100%;
 
     position: relative;
 
     background: #0f1111;
 
-    padding: 0 !important;
 
+    // padding: 0 !important;
 
     height: 170px !important;
 
+    display: flex;
 
+    flex-direction: column;
 
+
 
     .footer {
 
         display: flex;
 
         align-items: center;
 
         justify-content: space-between;
 
-        height: 170px;
 
-        line-height: 170px;
 
-        padding: 0 220px;
 
+        flex-grow: 1;
 
         .footer-l {
 
             display: flex;
 
             .logo {

+ 0 - 1
src/main/pc-space/src/views/My.vue
View File 

@@ -56,7 +56,6 @@ export default {
 
 </script>
 
 <style lang="less" scoped>
 
 .container {
 
-    padding: 0 200px;
 
     .title {
 
         height: 42px;
 
         font-size: 32px;

+ 1 - 1
src/main/pc-space/src/views/StoreDetail.vue
View File 

@@ -167,7 +167,7 @@ export default {
 
 </script>
 
 <style lang="less" scoped>
 
 .container {
 
-    padding: 50px 200px 200px;
 
+    padding: 50px 0 200px;
 
     background: #1a1a1a;
 
     .top {
 
         display: flex;