.

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

@@ -1,42 +1,42 @@
 <template>
     <div class="container">
-        <div class="header top-content">
+        <div class="header center-content">
             <router-link class="logo-link" :to="{ path: '/' }">
                 <img class="logo" src="../assets/nav_logo@3x (1).png" alt=""
             /></router-link>
-            <div class="content">
-                <el-tabs v-model="activeName" class="menus" @tab-click="change">
-                    <el-tab-pane
-                        v-for="(item, index) in menus"
-                        :key="index"
-                        :label="item.label"
-                        :name="item.value"
-                    ></el-tab-pane>
-                </el-tabs>
-                <div class="btn-list" v-if="isLogin">
-                    <el-dropdown @command="onCommand" style="margin-left: 20px">
-                        <span class="el-dropdown-link">
-                            <img class="img" :src="avatarBox" />
-                        </span>
-                        <el-dropdown-menu slot="dropdown">
-                            <el-dropdown-item command="nickname" style="word-break: keep-all"
-                                >{{ userInfo.nickname }}
-                            </el-dropdown-item>
-                            <div class="border"></div>
-                            <el-dropdown-item
-                                v-if="userInfo.authStatus != 'SUCCESS'"
-                                command="supply"
-                                style="word-break: keep-all"
-                                >去认证
-                            </el-dropdown-item>
-                            <el-dropdown-item command="edit" style="word-break: keep-all">编辑资料 </el-dropdown-item>
-                            <div class="border"></div>
-                            <el-dropdown-item command="logout">退出登录 </el-dropdown-item>
-                        </el-dropdown-menu>
-                    </el-dropdown>
-                </div>
-                <el-button v-else class="login" plain @click="Login">[登录]</el-button>
+        </div>
+        <div class="content">
+            <el-tabs v-model="activeName" class="menus" @tab-click="change">
+                <el-tab-pane
+                    v-for="(item, index) in menus"
+                    :key="index"
+                    :label="item.label"
+                    :name="item.value"
+                ></el-tab-pane>
+            </el-tabs>
+            <div class="btn-list" v-if="isLogin">
+                <el-dropdown @command="onCommand" style="margin-left: 20px">
+                    <span class="el-dropdown-link">
+                        <img class="img" :src="avatarBox" />
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item command="nickname" style="word-break: keep-all"
+                            >{{ userInfo.nickname }}
+                        </el-dropdown-item>
+                        <div class="border"></div>
+                        <el-dropdown-item
+                            v-if="userInfo.authStatus != 'SUCCESS'"
+                            command="supply"
+                            style="word-break: keep-all"
+                            >去认证
+                        </el-dropdown-item>
+                        <el-dropdown-item command="edit" style="word-break: keep-all">编辑资料 </el-dropdown-item>
+                        <div class="border"></div>
+                        <el-dropdown-item command="logout">退出登录 </el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
             </div>
+            <el-button v-else class="login" plain @click="Login">[登录]</el-button>
         </div>
         <login-info ref="ref" @close="show = false"></login-info>
     </div>
@@ -319,88 +319,79 @@ export default {
     position: sticky;
     top: 0;
     z-index: 999;
-
-    .header {
+    .content {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        &.top-content {
-            width: 100%;
-            box-sizing: border-box;
-            // padding: 0 22px;
-            // max-width: 1300px;
-            // max-width: 1600px;
-            margin: 0 auto;
-            margin-right: 0 !important;
-        }
-        .logo {
-            width: 130px;
-            height: 50px;
-        }
-        .logo-link {
-            padding: 15px 0px 15px 0px;
-            margin-left: 15%;
-        }
-        .content {
+        position: absolute;
+        right: 45px;
+        top: 0;
+        .tabs {
             display: flex;
             align-items: center;
-            justify-content: space-between;
-            position: absolute;
-            right: 20px;
-            .tabs {
-                display: flex;
-                align-items: center;
-                padding-top: 10px;
-                cursor: pointer;
-                .tab {
-                    width: 130px;
-                    font-size: 18px;
+            padding-top: 10px;
+            cursor: pointer;
+            .tab {
+                width: 130px;
+                font-size: 18px;
+                font-weight: bold;
+                text-align: center;
+                color: #939599;
+                line-height: 28px;
+                &.active {
+                    color: #ffffff;
                     font-weight: bold;
-                    text-align: center;
-                    color: #939599;
-                    line-height: 28px;
+                }
+                .slip {
+                    width: 26px;
+                    margin: 0 auto;
+                    padding-bottom: 13px;
                     &.active {
-                        color: #ffffff;
-                        font-weight: bold;
-                    }
-                    .slip {
-                        width: 26px;
-                        margin: 0 auto;
-                        padding-bottom: 13px;
-                        &.active {
-                            border-bottom: 2px solid #fff;
-                            border-radius: 2px;
-                        }
+                        border-bottom: 2px solid #fff;
+                        border-radius: 2px;
                     }
                 }
             }
-            .btn-list {
-                .img {
-                    width: 34px;
-                    height: 34px;
-                    border-radius: 50%;
-                    display: block;
-                    border: 2px solid #fff;
-                    cursor: pointer;
-                }
+        }
+        .btn-list {
+            .img {
+                width: 34px;
+                height: 34px;
+                border-radius: 50%;
+                display: block;
+                border: 2px solid #fff;
+                cursor: pointer;
             }
+        }
 
-            .login {
-                width: 83px;
-                color: @prim;
-                font-size: 16px;
-                // margin: 0 30px;
-                height: 30px;
-                line-height: 0px;
-                background-color: transparent;
-                .line(@radius:4px);
-                border-width: 0;
-                /deep/span {
-                    position: relative;
-                    z-index: 3;
-                }
-                // .line();
+        .login {
+            width: 83px;
+            color: @prim;
+            font-size: 16px;
+            // margin: 0 30px;
+            height: 30px;
+            line-height: 0px;
+            background-color: transparent;
+            .line(@radius:4px);
+            border-width: 0;
+            /deep/span {
+                position: relative;
+                z-index: 3;
             }
+            // .line();
+        }
+    }
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .logo {
+            width: 130px;
+            height: 50px;
+        }
+        .logo-link {
+            padding: 15px 0px 15px 0px;
+            // margin-left: 15%;
         }
     }
 }

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

@@ -2,22 +2,19 @@
     <div class="container">
         <img class="topBox" src="../assets/矩形@3x (1).png" alt="" />
 
-        <div class="top">
-            <div class="top1">
-                <div class="title1">嗨! 我们是第九空间</div>
-                <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
-                <div class="btnCon" @click="$router.push('/collection')"><span>立即探索</span></div>
-            </div>
-            <div class="back">
-                <!-- <swiper class="mySwiper imgBoxBack" ref="mySwiper" :options="swiperOptions">
+        <div class="top center-content">
+            <div class="title1">嗨! 我们是第九空间</div>
+            <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
+            <div class="btnCon" @click="$router.push('/collection')"><span>立即探索</span></div>
+        </div>
+        <div class="back">
+            <!-- <swiper class="mySwiper imgBoxBack" ref="mySwiper" :options="swiperOptions">
                     <swiper-slide>
                     <el-image :src="getImg(banners[0].pic, '', 800)" />
                     </swiper-slide>
                 </swiper> -->
-                <img class="el-image" src="../assets/bg@3x.png" alt="" />
-            </div>
+            <img class="el-image" src="../assets/bg@3x.png" alt="" />
         </div>
-
         <div class="hot1">铸造者</div>
         <div class="introduce center-content">
             <router-link
@@ -269,89 +266,83 @@ export default {
     height: 460px;
 }
 .container {
+    .back {
+        .el-image {
+            width: 745px;
+            height: 460px;
+            display: inline-block;
+            position: absolute;
+            top: 90px;
+            right: 0px;
+        }
+        // margin-right: 110px;
+        // .mySwiper {
+        //     width: 745px;
+        //     height: 460px;
+        //     display: inline-block;
+        //     position: absolute;
+        //     top: 90px;
+        //     .imgBoxBack {
+        //         border-radius: 0px;
+        //     }
+        //     /deep/.el-image {
+        //         display: block;
+        //         width: 745px !important;
+        //         height: 460px !important;
+        //         border-radius: 0px !important;
+        //         // margin-left: 1px;
+        //         img {
+        //             display: block;
+        //         }
+        //     }
+        // }
+    }
     .top {
-        display: flex;
         position: absolute;
         width: 100%;
         top: 0;
         left: 0;
         right: 0;
         z-index: 88;
-        justify-content: space-between;
-        .back {
-            .el-image {
-                width: 745px;
-                height: 460px;
-                display: inline-block;
-                position: absolute;
-                top: 90px;
-                right: 0px;
-            }
-            // margin-right: 110px;
-            // .mySwiper {
-            //     width: 745px;
-            //     height: 460px;
-            //     display: inline-block;
-            //     position: absolute;
-            //     top: 90px;
-            //     .imgBoxBack {
-            //         border-radius: 0px;
-            //     }
-            //     /deep/.el-image {
-            //         display: block;
-            //         width: 745px !important;
-            //         height: 460px !important;
-            //         border-radius: 0px !important;
-            //         // margin-left: 1px;
-            //         img {
-            //             display: block;
-            //         }
-            //     }
-            // }
+        // justify-content: space-between;
+
+        .title {
+            height: 42px;
+            font-size: 32px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 42px;
+            font-family: ZhenyanGB-Regular, ZhenyanGB;
+            padding: 130px 0 25px 10px;
         }
-        .top1 {
-            // width: 100%;
-            box-sizing: border-box;
-            padding: 0 50px;
-            margin-left: 12%;
-            .title {
-                height: 42px;
-                font-size: 32px;
-                font-weight: 400;
-                color: #ffffff;
-                line-height: 42px;
-                font-family: ZhenyanGB-Regular, ZhenyanGB;
-                padding: 130px 0 25px 10px;
-            }
-            .title1 {
-                line-height: 47px;
-                font-size: 46px;
-                font-weight: 400;
-                color: #ffffff;
-                font-family: ZhenyanGB-Regular, ZhenyanGB;
-                padding: 220px 0 25px 10px;
-            }
-            .title2 {
-                font-size: 20px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #ffffff;
-                padding-left: 10px;
-            }
-            .btnCon {
-                line-height: 44px;
-                text-align: center;
-                background: transparent;
-                margin: 60px 0 0 10px;
-                font-size: 20px;
-                width: 136px;
-                cursor: pointer;
-                height: 44px;
-                border: 1px solid;
-                border-radius: 8px;
-                color: #fdfb60;
-                border-image: linear-gradient(135deg, rgba(253, 251, 96, 1), rgba(255, 143, 62, 1)) 1 1;
-            }
+        .title1 {
+            line-height: 47px;
+            font-size: 46px;
+            font-weight: 400;
+            color: #ffffff;
+            font-family: ZhenyanGB-Regular, ZhenyanGB;
+            padding: 220px 0 25px 10px;
+        }
+        .title2 {
+            font-size: 20px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ffffff;
+            padding-left: 10px;
+        }
+        .btnCon {
+            line-height: 44px;
+            text-align: center;
+            background: transparent;
+            margin: 60px 0 0 10px;
+            font-size: 20px;
+            width: 136px;
+            cursor: pointer;
+            height: 44px;
+            border: 1px solid;
+            border-radius: 8px;
+            color: #fdfb60;
+            border-image: linear-gradient(135deg, rgba(253, 251, 96, 1), rgba(255, 143, 62, 1)) 1 1;
         }
     }
 }