资料账号&粉丝

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

@@ -0,0 +1,73 @@
+<template>
+    <div class="container">
+        <div class="top"></div>
+        <div class="top1">
+            <div class="title" @click="Fans">
+                <div class="title1">333</div>
+                <div class="title2" :class="{ active }">粉丝</div>
+            </div>
+            <img class="img2" src="../assets/img/888.jpg" alt="" />
+            <div class="title">
+                <div class="title1">2</div>
+                <div class="title2">关注</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            tabs: ['粉丝', '关注'],
+            active: ''
+        };
+    },
+    methods: {
+        Fans() {
+            this.$router.push('/fans');
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    .top {
+        height: 146px;
+        background: #00ffcb;
+    }
+    .top1 {
+        display: flex;
+        justify-content: center;
+        position: relative;
+        .title {
+            text-align: center;
+            cursor: pointer;
+            padding: 8px 100px 0;
+            .title1 {
+                font-size: 22px;
+                font-weight: normal;
+                color: #ffffff;
+                line-height: 24px;
+            }
+            .title2 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+                &.active {
+                    color: red;
+                }
+            }
+        }
+        .img2 {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            padding: 4px;
+            background: #ffffff;
+            top: -50px;
+        }
+    }
+}
+</style>

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

@@ -18,17 +18,13 @@
                 <div class="btn-list" v-if="!isLogin">
                     <el-dropdown @command="onCommand" style="margin-left: 20px" trigger="click">
                         <span class="el-dropdown-link">
-                            <img
-                                style="display: block"
-                                src="https://zhirongip.oss-cn-hangzhou.aliyuncs.com/image/2021-07-06-10-38-11oGTyzHPI.png"
-                            /><i class="el-icon-arrow-down el-icon--right"></i>
+                            <img class="img" :src="avatarBox" />
                         </span>
                         <el-dropdown-menu slot="dropdown">
                             <el-dropdown-item command="nickname" style="word-break: keep-all"> </el-dropdown-item>
                             <div class="border1"></div>
+                            <el-dropdown-item command="supply" style="word-break: keep-all">去认证 </el-dropdown-item>
                             <el-dropdown-item command="edit" style="word-break: keep-all">编辑资料 </el-dropdown-item>
-                            <el-dropdown-item command="supply" style="word-break: keep-all">我的供给 </el-dropdown-item>
-                            <el-dropdown-item command="demand" style="word-break: keep-all">我的需求 </el-dropdown-item>
                             <div class="border1"></div>
                             <el-dropdown-item command="logout">退出登录 </el-dropdown-item>
                         </el-dropdown-menu>
@@ -53,7 +49,14 @@ export default {
             show: false
         };
     },
-    computed: { ...mapState(['userInfo']) },
+    computed: {
+        ...mapState(['userInfo']),
+        avatarBox() {
+            return this.userInfo
+                ? this.userInfo
+                : 'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/image/2021-06-30-17-02-42uzAOUPcw.jpeg';
+        }
+    },
     mounted() {
         this.$EventBus.$on('login', () => {
             this.show = true;
@@ -63,8 +66,6 @@ export default {
         tab(item) {
             this.active = item;
             if (item === '铸造者') {
-                console.log(this.userInfo);
-                console.log(this.isLogin);
                 this.$router.push('/casting');
             } else if (item === '收藏探索') {
                 this.$router.push('/collection');
@@ -74,9 +75,12 @@ export default {
                 this.$router.push('/my');
             }
         },
-        onCommands() {},
         batchRead() {},
-        onCommand() {}
+        onCommand(command) {
+            if (command === 'edit') {
+                this.$router.push('/accountdata');
+            }
+        }
     }
 };
 </script>
@@ -84,7 +88,6 @@ export default {
 .container {
     height: 90px;
     background: #0f1111;
-    // min-width: 1400px;
     width: 100%;
     .header {
         display: flex;
@@ -126,6 +129,14 @@ export default {
                     }
                 }
             }
+            .btn-list {
+                .img {
+                    width: 34px;
+                    height: 34px;
+                    border-radius: 50%;
+                    display: block;
+                }
+            }
             .login {
                 width: 83px;
                 height: 30px;

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

@@ -13,7 +13,7 @@ import eventBus from '../eventBus';
 const routes = [
     {
         path: '/',
-        redirect: 'home'
+        redirect: 'personal'
     },
     {
         path: '/',
@@ -75,6 +75,28 @@ const routes = [
                     title: '我的NFT',
                     checkLogin: true
                 }
+            },
+            {
+                path: '/',
+                component: () => import('../views/user/Personal'),
+                children: [
+                    {
+                        path: '/accountdata',
+                        name: 'accountdata',
+                        component: () => import('../views/user/AccountData.vue'),
+                        meta: {
+                            title: '资料账号'
+                        }
+                    },
+                    {
+                        path: '/fans',
+                        name: 'fans',
+                        component: () => import('../views/user/Fans.vue'),
+                        meta: {
+                            title: '粉丝'
+                        }
+                    }
+                ]
             }
         ]
     }

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

@@ -44,12 +44,6 @@ export default {
     methods: {
         tab(item) {
             this.active = item;
-        },
-        handleSizeChange(val) {
-            console.log(`每页 ${val} 条`);
-        },
-        handleCurrentChange(val) {
-            console.log(`当前页: ${val}`);
         }
     }
 };

src/main/pc-space/src/views/user/AccountData.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="container">
+        <fans-info></fans-info>
+        <div class="content">
+            <div class="name">基本信息</div>
+            <div class="box">
+                <div class="text">
+                    <div class="text1">
+                        <span class="el-icon-user"></span>
+                    </div>
+                    <div class="text2">昵称</div>
+                    <div class="text3">中国</div>
+                </div>
+                <div class="text4">修改</div>
+            </div>
+            <div class="box">
+                <div class="text">
+                    <div class="text1">
+                        <span class="el-icon-price-tag"></span>
+                    </div>
+                    <div class="text2">编码</div>
+                    <div class="text3">中国</div>
+                </div>
+                <div class="text4">修改</div>
+            </div>
+            <div class="box">
+                <div class="text">
+                    <div class="text1">
+                        <span class="el-icon-document"></span>
+                    </div>
+                    <div class="text2">简介</div>
+                    <div class="text3 text5">
+                        广州小云互娱科技有限公司成立于2017年，作为广东省游戏产业协会成员，是一家集游戏研发、运营和发行领域的综合性游戏公司。广州小云互娱科技有限公司成立于2017年，作为广东省游戏产业协会成员，是一家集游戏研发、运营和发行领域的综合性游戏公司。广州小云互娱科技有限公司成立于2017年，作为广东省游戏产业协会成员，是一家集游戏研发、运营和发行领域的综合性游戏公…
+                    </div>
+                </div>
+                <div class="text4">修改</div>
+            </div>
+            <div class="box">
+                <div class="text">
+                    <div class="text1">
+                        <span class="el-icon-message"></span>
+                    </div>
+                    <div class="text2">邮箱</div>
+                    <div class="text3">中国</div>
+                </div>
+                <div class="text4">修改</div>
+            </div>
+            <div class="border"></div>
+            <div class="name">账号安全</div>
+            <div class="box">
+                <div class="text">
+                    <div class="text1">
+                        <span class="el-icon-mobile-phone"></span>
+                    </div>
+                    <div class="text2">登录账号</div>
+                    <div class="text3">中国</div>
+                </div>
+                <div class="text4">修改</div>
+            </div>
+            <div class="box">
+                <div class="text">
+                    <div class="text1">
+                        <span class="el-icon-lock"></span>
+                    </div>
+                    <div class="text2">登录密码</div>
+                    <div class="text3">中国</div>
+                </div>
+                <div class="text4">修改</div>
+            </div>
+            <div class="box">
+                <div class="text">
+                    <div class="text1">
+                        <span class="el-icon-lock"></span>
+                    </div>
+                    <div class="text2">交易密码</div>
+                    <div class="text3">付款时用来认证身份信息</div>
+                </div>
+                <div class="text4">修改</div>
+            </div>
+            <div class="border"></div>
+            <div class="name">认证信息</div>
+            <div class="box">
+                <div class="text">
+                    <div class="text1">
+                        <span class="el-icon-lock"></span>
+                    </div>
+                    <div class="text2">实名认证</div>
+                    <div class="text3">当前未实名认证</div>
+                </div>
+                <div class="text4">修改</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import FansInfo from '../../components/FansInfo.vue';
+export default {
+    components: { FansInfo },
+    data() {
+        return {};
+    },
+    methods: {}
+};
+</script>
+<style lang="less" scoped>
+.container {
+    .content {
+        padding: 0 16px;
+        .name {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24px;
+            margin: 30px 0 10px 0;
+        }
+        .box {
+            display: flex;
+            justify-content: space-between;
+            padding: 16px 0;
+            .text {
+                display: flex;
+                .text1 {
+                    font-size: 24px;
+                    color: #cccccc;
+                }
+                .text2 {
+                    font-size: 17px;
+                    font-weight: 400;
+                    color: #ffffff;
+                    line-height: 24px;
+                    width: 94px;
+                    margin: 2px 0 0 10px;
+                }
+                .text3 {
+                    font-size: 16px;
+                    font-weight: 400;
+                    color: #949699;
+                    line-height: 26px;
+                    &.text5 {
+                        width: 745px;
+                    }
+                }
+            }
+            .text4 {
+                font-size: 16px;
+                font-weight: 400;
+                color: #00ffcb;
+                line-height: 24px;
+                cursor: pointer;
+            }
+        }
+        .border {
+            height: 1px;
+            background: #494a4d;
+            border-radius: 1px;
+            margin-top: 30px;
+        }
+    }
+}
+</style>

src/main/pc-space/src/views/user/Fans.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="container">
+        <fans-info></fans-info>
+        <div class="border"></div>
+        <div class="content">
+            <div class="box">
+                <div class="text">
+                    <div class="text1"></div>
+                    <div class="box2">
+                        <div class="name">
+                            <div class="name1">创作者姓名</div>
+                            <div class="name2"></div>
+                        </div>
+                        <div class="text2">介绍</div>
+                        <div class="box3">
+                            <div class="box4">
+                                <div>
+                                    <div class="text4">粉丝 <span>233</span></div>
+                                </div>
+                                <div>
+                                    <div class="text4">已售 <span>233</span></div>
+                                </div>
+                            </div>
+                            <div class="btn">关注</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="imgBox">
+                    <div class="imgBox1">111</div>
+                    <div class="imgBox1">111</div>
+                    <div class="imgBox1">111</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import FansInfo from '../../components/FansInfo.vue';
+export default {
+    components: { FansInfo },
+    data() {
+        return {};
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    .border {
+        height: 1px;
+        background: #494a4d;
+        border-radius: 1px;
+        margin: 17px 10px 20px;
+    }
+    .content {
+        padding: 0 16px;
+        .box {
+            .flex();
+            justify-content: space-between;
+            .text {
+                .flex();
+                justify-content: space-between;
+                .text1 {
+                    width: 78px;
+                    height: 78px;
+                    border-radius: 50%;
+                    background: red;
+                    margin-right: 12px;
+                }
+                .box2 {
+                    width: 288px;
+                    .name {
+                        .flex();
+                        margin-top: 5px;
+                        .name1 {
+                            font-size: 16px;
+                            font-weight: bold;
+                            color: #ffffff;
+                            line-height: 24px;
+                            margin-right: 6px;
+                        }
+                        .name2 {
+                            width: 18px;
+                            height: 18px;
+                            background: red;
+                        }
+                    }
+                    .text2 {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #939599;
+                        line-height: 24px;
+                        margin-bottom: 8px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                    .box3 {
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        .box4 {
+                            display: flex;
+                            .text4 {
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #939599;
+                                line-height: 24px;
+                                margin-right: 20px;
+                            }
+                            span {
+                                color: #fff;
+                            }
+                        }
+                        .btn {
+                            width: 70px;
+                            height: 26px;
+                            border-radius: 16px;
+                            border: 1px solid;
+                            // border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
+                            line-height: 26px;
+                            text-align: center;
+                            font-size: 14px;
+                            color: #00ffcb;
+                        }
+                    }
+                }
+            }
+            .imgBox {
+                .flex();
+                .imgBox1 {
+                    width: 140px;
+                    height: 100px;
+                    border-radius: 8px;
+                    background: red;
+                    margin-left: 30px;
+                }
+            }
+        }
+    }
+}
+</style>

src/main/pc-space/src/views/user/Personal.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="container center-content">
+        <div class="title">个人中心</div>
+        <div class="content">
+            <el-menu
+                default-active="/accountdata"
+                router
+                class="el-menu-vertical-demo"
+                background-color="#545c64"
+                text-color="#fff"
+                active-text-color="#00FFCB"
+            >
+                <el-submenu index="1">
+                    <template slot="title">
+                        <i class="el-icon-location"></i>
+                        <span>用户信息</span>
+                    </template>
+                    <el-menu-item index="/accountdata">资料与账号</el-menu-item>
+                    <el-menu-item index="1-2">地址管理</el-menu-item>
+                    <el-menu-item index="1-3">我赞过的</el-menu-item>
+                </el-submenu>
+                <el-menu-item index="2">
+                    <i class="el-icon-menu"></i>
+                    <span slot="title">交易信息</span>
+                </el-menu-item>
+                <el-menu-item index="3">
+                    <i class="el-icon-setting"></i>
+                    <span slot="title">铸造信息</span>
+                </el-menu-item>
+            </el-menu>
+            <div class="main">
+                <router-view />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {};
+    },
+    methods: {
+        handleOpen(key, keyPath) {
+            console.log(key, keyPath);
+        },
+        handleClose(key, keyPath) {
+            console.log(key, keyPath);
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    /deep/ .el-menu {
+        width: 200px;
+        background: #1c1e26 !important;
+        margin-right: 30px;
+        .el-submenu__title {
+            background: #1c1e26 !important;
+        }
+        .el-menu-item {
+            background: #1c1e26 !important;
+
+            &.is-active {
+                color: red;
+            }
+        }
+    }
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0;
+    }
+    .content {
+        display: flex;
+        .main {
+            .flex-col();
+            background: #1c1e26 !important;
+            flex-grow: 1;
+            min-height: 1100px;
+        }
+    }
+}
+</style>