.

src/main/pc-space/public/index.html

@@ -5,7 +5,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <link rel="icon" href="<%= BASE_URL %>favicon.png" />
-        <title>第九空间</title>
+        <title>modern point</title>
         <link rel="stylesheet" href="./client.css" />
         <link rel="stylesheet" href="https://at.alicdn.com/t/font_2852142_5nb94jewry2.css" />
         <link

src/main/pc-space/src/App.vue

@@ -6,7 +6,7 @@
 
 <style lang="less" scoped>
 #app {
-    background: #1a1a1a;
+    background: #f6f9ff;
     min-width: 1300px;
 }
 </style>

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

@@ -97,10 +97,13 @@ export default {
 </script>
 <style lang="less" scoped>
 .collect {
-    .line();
     width: 276px;
     height: 426px;
     display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ebeff1;
+    border-radius: 8px;
+    box-sizing: border-box;
     &::before {
         border-radius: 8px !important;
     }
@@ -151,7 +154,7 @@ export default {
         padding: 10px 16px 14px;
         font-size: 16px;
         font-weight: bold;
-        color: #ffffff;
+        color: #26273c;
         line-height: 20px;
     }
     .con {
@@ -162,7 +165,7 @@ export default {
         .border {
             width: 100%;
             height: 1px;
-            background: #494a4d;
+            background: #ebeff1;
             border-radius: 1px;
             margin: 10px 16px;
         }
@@ -199,7 +202,7 @@ export default {
             font-size: 26px;
             font-family: OSP-DIN, OSP;
             font-weight: normal;
-            color: @prim;
+            color: #ff5daf;
             line-height: 30px;
         }
         .time {

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

@@ -34,16 +34,16 @@ export default {
     justify-content: center;
     padding: 20px;
     .name {
-        font-size: 16px;
-        color: #ffffff;
+        font-size: 14px;
+        color: #939599;
         line-height: 24px;
         padding: 20px;
         cursor: pointer;
         display: inline-block;
     }
     i {
-        font-size: 16px;
-        color: #ffffff99;
+        font-size: 10px;
+        color: #939599;
         font-weight: bold;
     }
 

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="container">
+    <div class="container" :class="{ contentBox: scrollTop > 0, fixedBox: isFixed }">
         <div class="header center-content">
             <router-link class="logo-link" :to="{ path: '/' }">
                 <img class="logo" src="../assets/nav_logo@3x (1).png" alt=""
@@ -15,25 +15,25 @@
                 </el-tabs>
 
                 <div class="btn-list" v-if="isLogin">
-                    <el-dropdown @command="onCommand" style="margin-left: 20px">
+                    <el-dropdown @command="onCommand" style="margin-left: 20px;">
                         <span class="el-dropdown-link">
                             <img class="img" :src="avatarBox || require('../assets/png-touxiang@.png')" />
                         </span>
                         <el-dropdown-menu slot="dropdown">
-                            <el-dropdown-item command="nickname" style="word-break: keep-all"
+                            <el-dropdown-item command="nickname" style="word-break: keep-all;"
                                 >{{ userInfo.nickname }}
                             </el-dropdown-item>
                             <div class="border"></div>
-                            <el-dropdown-item command="supply" style="word-break: keep-all"
+                            <el-dropdown-item command="supply" style="word-break: keep-all;"
                                 >{{ Status }}
                             </el-dropdown-item>
-                            <el-dropdown-item command="edit" 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>
+                <el-button v-else class="login" plain @click="Login">登录</el-button>
             </div>
         </div>
         <login-info ref="ref" @close="show = false"></login-info>
@@ -43,6 +43,7 @@
 import LoginInfo from '../components/LoginInfo.vue';
 // import pageableTable from '@/mixins/pageableTable';
 import { mapState, mapMutations } from 'vuex';
+
 export default {
     // mixins: [pageableTable],
     components: { LoginInfo },
@@ -82,7 +83,8 @@ export default {
                     label: '了解更多',
                     value: 'wait'
                 }
-            ]
+            ],
+            scrollTop: 0
         };
     },
     computed: {
@@ -98,6 +100,9 @@ export default {
             } else {
                 return '个人已认证';
             }
+        },
+        isFixed() {
+            return !!this.$route.meta.fixedHeader;
         }
     },
     mounted() {
@@ -112,6 +117,10 @@ export default {
                 }, 1000);
             }
         }
+        this.scrollTop = document.documentElement.scrollTop;
+        window.onscroll = () => {
+            this.scrollTop = document.documentElement.scrollTop;
+        };
     },
     methods: {
         add() {
@@ -276,19 +285,19 @@ export default {
     text-align: center;
 }
 /deep/ .el-tabs__item:hover {
-    color: #fdfb60 !important;
+    color: #9971ee !important;
 }
 /deep/.menus {
     padding: 15px 24px 0;
 
     .el-tabs__item {
         padding: 0 22px;
-        color: #ffffff;
+        color: #939599;
         font-size: 16px;
         font-weight: normal;
         // font-weight: bold;
         &.is-active {
-            color: #fdfb60;
+            color: @text0;
             font-weight: bold;
         }
         &:focus {
@@ -310,7 +319,7 @@ export default {
             position: absolute;
             left: 30%;
             right: 30%;
-            background-color: #fdfb60;
+            background-color: @prim;
             top: 0;
             bottom: 0;
         }
@@ -324,11 +333,20 @@ export default {
 
 .container {
     height: 90px;
-    background: #0f1111;
+    background: rgba(255, 255, 255, 0.3);
     width: 100%;
     position: sticky;
     top: 0;
     z-index: 999;
+    left: 0;
+    right: 0;
+    &.contentBox {
+        background-color: @bg;
+    }
+
+    &.fixedBox {
+        position: fixed;
+    }
     .content {
         display: flex;
         align-items: center;
@@ -347,15 +365,15 @@ export default {
         }
 
         .login {
-            width: 83px;
-            color: @prim;
+            width: 80px;
+            color: #fff;
             font-size: 14px;
             // margin: 0 30px;
-            height: 28px;
+            height: 26px;
             line-height: 0px;
-            background-color: transparent;
-            .line(@radius:4px);
+            background-color: #9971ee;
             border-width: 0;
+            margin-left: 16px;
             /deep/span {
                 position: relative;
                 z-index: 3;
@@ -368,11 +386,12 @@ export default {
         align-items: center;
         justify-content: space-between;
         .logo {
-            width: 130px;
-            height: 50px;
+            width: 96px;
+            height: 66px;
+            display: block;
         }
         .logo-link {
-            padding: 15px 0px 15px 0px;
+            padding: 12px 0px 12px 0px;
             // margin-left: 15%;
         }
     }

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://nfttest.9space.vip/';
+        baseUrl = 'https://moderntest.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/router/index.js

@@ -24,7 +24,8 @@ const routes = [
                 name: 'home',
                 component: () => import('../views/Home.vue'),
                 meta: {
-                    title: '首页'
+                    title: '首页',
+                    fixedHeader: true
                 }
             },
             {

src/main/pc-space/src/styles/common.less

@@ -1,10 +1,10 @@
 @warn: #ff8f3e;
 @success: #07c160;
 @danger: #ea2d2d;
-@prim: #fdfb60;
+@prim: #9971EE;
 @info: #939599;
-@text0: #181818;
-@text1: #323233;
+@text0: #26273C;
+@text1: #26273C;
 @text2: #606266;
 @text3: #939599;
 @text4: #c6c8cc;
@@ -12,7 +12,8 @@
 @border2: #f2f3f5;
 @border3: #dfe1e6;
 @border4: #f2f6fc;
-@bg: #f5f7fa;
+@bg: #f6f9ff;
+@bg1: #fbfcff;
 @red: #fd4d49;
 @menuFont: 16px;
 @menuFont1: 12px;
@@ -41,31 +42,31 @@
     -webkit-line-clamp: @line;
     overflow: hidden;
 }
-.pagination(){
-     display: flex;
-     margin: 80px 375px;
-
-     /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;
-             }
-         }
-     }
+.pagination() {
+    display: flex;
+    margin: 80px 375px;
+
+    /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;
+            }
+        }
+    }
 }
 .min-height(@subHeight:462px, @screenHeight:969px) {
     min-height: calc(100vh - @subHeight);

src/main/pc-space/src/styles/list.less

@@ -1,36 +1,35 @@
 .search {
-    background: #1a1a1a;
+    background: @bg1;
     width: 280px;
     height: 42px;
     border-radius: 8px;
     margin: 30px 0;
 
     /deep/.el-input__inner {
-        border: 1px solid #898989;
+        border: 1px solid #ebeff1;
         background-color: transparent;
-        color: #fff;
+        color: @text0;
         border-radius: 8px;
         &:focus {
-            border-color: #fff;
+            border-color: @prim;
         }
     }
 }
 .border {
     height: 1px;
-    background: #2B2E3E;
+    background: #ebeff1;
     border-radius: 1px;
-    margin: 0 16px;
+    // margin: 0 16px;
 }
 .container {
-    
-    background: #1a1a1a;
+    background: @bg1;
     .center-content();
 
     .title {
         height: 30px;
         font-size: 30px;
         line-height: 30px;
-        color: #ffffff;
+        color: @text0;
         padding: 60px 0;
         font-family: ZhenyanGB;
     }
@@ -44,19 +43,21 @@
     }
 
     .content {
-          &:hover {
-              // .imgBox {
-              position: relative;
-              transition: transform 0.5s ease-out;
-              -o-transition: transform 0.5s ease-out;
-              -webkit-transition: transform 0.5s ease-out;
-              -moz-transition: transform 0.5s ease-out;
-              transform: scale(1.1);
-              -ms-transform: scale(1.1);
-              -webkit-transform: scale(1.1);
-          }
+        background-color: #fff;
+        position: relative;
+        &:hover {
+            // .imgBox {
+            position: relative;
+            transition: transform 0.5s ease-out;
+            -o-transition: transform 0.5s ease-out;
+            -webkit-transition: transform 0.5s ease-out;
+            -moz-transition: transform 0.5s ease-out;
+            transform: scale(1.1);
+            -ms-transform: scale(1.1);
+            -webkit-transform: scale(1.1);
+        }
         width: 276px;
-        .line(@radius:8px);
+        // .line(@radius:8px);
         display: inline-block;
         margin: 16px;
         .imgBox {
@@ -82,7 +83,7 @@
                 height: 24px;
                 font-size: 16px;
                 font-weight: bold;
-                color: #ffffff;
+                color: @text0;
                 line-height: 24px;
                 margin-top: 50px;
                 padding-right: 6px;
@@ -125,7 +126,7 @@
             .text3 {
                 font-size: 16px;
                 font-weight: 400;
-                color: #ffffff;
+                color: @text0;
                 line-height: 24px;
             }
             .text4 {
@@ -134,49 +135,52 @@
                 color: #939599;
                 line-height: 24px;
             }
-              .el-button {
-                  background-color: transparent;
-                  min-width: 76px;
-                  height: 28px;
+            .el-button {
+                background-color: transparent;
+                min-width: 76px;
+                height: 28px;
 
-                  &.prim {
-                      .line(@radius: 28px);
-                      border: 0;
-                      text-align: center;
+                &.prim {
+                    text-align: center;
+                    border: 1px solid @prim;
 
-                      /deep/span {
-                          color: @prim;
-                          position: relative;
-                          z-index: 1;
-                      }
-                  }
-              }
+                    /deep/span {
+                        color: @prim;
+                        position: relative;
+                        z-index: 1;
+                    }
+                }
+            }
         }
     }
 }
 /deep/.el-input__inner {
-    border: 1px solid #898989;
+    border: 1px solid #ebeff1;
     background-color: transparent;
-    color: #fff;
+    color: @text0;
     border-radius: 8px;
 }
 /deep/.menu {
     .el-radio-button__inner {
-        border-color: #949699;
+        border-color: #ebeff1;
         background-color: transparent;
         color: #949699;
         width: 140px;
         font-weight: normal;
+        &:hover {
+            background-color: @bg;
+            color: @prim;
+        }
     }
     .el-radio-button__orig-radio:checked + .el-radio-button__inner {
-        background: linear-gradient(46deg, @prim 0%, @warn 100%);
-        color: #000;
-        border-color: #fff;
+        background: linear-gradient(46deg, @prim 0%, @prim 100%);
+        color: #fff;
+        border-color: @prim;
         font-weight: bold;
         // box-shadow: 0 !important;
         box-shadow: 0 0 0 0 #000000;
     }
-    
+
     .el-radio-button {
         &:last-child {
             .el-radio-button__inner {
@@ -192,7 +196,6 @@
 }
 
 .list {
-    
     margin: -16px -16px;
     min-height: 800px;
     .content {

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

@@ -23,7 +23,7 @@
                     </div>
 
                     <el-button
-                        style="color: #939599"
+                        style="color: #939599;"
                         plain
                         round
                         :class="{ prim: !info.follow }"
@@ -33,7 +33,7 @@
                         {{ info.follow ? '已关注' : '关注' }}
                     </el-button>
                     <el-popover popper-class="share-popver" placement="bottom" trigger="hover">
-                        <el-button style="margin-left: 20px; color: #939599" slot="reference" plain round size="mini"
+                        <el-button style="margin-left: 20px; color: #939599;" slot="reference" plain round size="mini"
                             >分享</el-button
                         >
                         <share :info="info" pageType="castingDetail"> </share>
@@ -45,7 +45,7 @@
                 </div>
             </div>
 
-            <div class="anchor" style="height: 50px" ref="anchor"></div>
+            <div class="anchor" style="height: 50px;" ref="anchor"></div>
 
             <el-radio-group @change="change" class="menu" v-model="isOwner" size="normal">
                 <el-radio-button v-for="(item, index) in typeList" :key="index" :label="item.value">
@@ -55,7 +55,7 @@
                 </el-radio-button>
             </el-radio-group>
 
-            <div class="border" style="margin-top: 30px"></div>
+            <div class="border" style="margin-top: 30px;"></div>
             <div class="search-list">
                 <el-input
                     class="search"
@@ -66,9 +66,9 @@
                     @change="onSearch"
                 >
                 </el-input>
-                <div style="display: flex">
+                <div style="display: flex;">
                     <el-select
-                        style="margin: 30px 20px 0 0; width: 120px"
+                        style="margin: 30px 20px 0 0; width: 120px;"
                         class="select"
                         v-model="value"
                         @change="getList"
@@ -84,7 +84,7 @@
                     </el-select>
                     <el-select
                         class="select"
-                        style="margin-top: 30px; width: 120px"
+                        style="margin-top: 30px; width: 120px;"
                         v-model="sortStr"
                         placeholder="请选择"
                     >
@@ -299,7 +299,7 @@ export default {
     .name {
         font-size: 24px;
         font-weight: bold;
-        color: #ffffff;
+        color: @text0;
         line-height: 34px;
         vertical-align: middle;
         img {
@@ -333,14 +333,14 @@ export default {
         margin-top: 6px;
         .follow-info {
             font-size: 14px;
-            color: #ffffff;
+            color: @text0;
             line-height: 24px;
             margin-right: 30px;
             span {
                 &:last-child {
                     font-size: 16px;
                     font-family: Arial-BoldMT, Arial;
-                    color: #ffffff;
+                    color: @text0;
                     line-height: 24px;
                     margin-left: 6px;
                 }
@@ -352,11 +352,11 @@ export default {
             height: 28px;
 
             &.prim {
-                .line(@radius:28px);
                 border: 0;
                 text-align: center;
+                background-color: @prim;
                 /deep/span {
-                    color: @prim;
+                    color: #fff;
                     position: relative;
                     z-index: 1;
                 }

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

@@ -1,9 +1,9 @@
 <template>
     <div class="container">
-        <img class="topBox" src="../assets/矩形@3x (1).png" alt="" />
+        <img class="topBox" src="../assets/bg.jpg" alt="" />
 
         <div class="top center-content">
-            <div class="title1">嗨! 我们是第九空间</div>
+            <div class="title1">嗨! 我们是modern point</div>
             <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
             <div class="btnCon" @click="$router.push('/collection')"><span>立即探索</span></div>
         </div>
@@ -13,7 +13,7 @@
                     <el-image :src="getImg(banners[0].pic, '', 800)" />
                 </swiper-slide>
             </swiper> -->
-        <img class="title-img" :src="titleImg" alt="" style="object-fit: cover" />
+        <img class="title-img" :src="titleImg" alt="" style="object-fit: cover;" />
 
         <div class="hot1">铸造者</div>
         <div class="introduce center-content">
@@ -97,29 +97,33 @@
                     </div>
                 </div>
             </div>
-            <div class="space">为什么叫第九空间</div>
-            <div class="space2">
-                一切数据皆可复制的时代，第九空间NFT让你拥有一份独家数字藏品，让你拥有一份唯一游戏权益
-            </div>
-            <div class="th">
-                <div>
-                    <div class="words1">我们始终坚信</div>
-                    <div class="words2">未来的虚拟世界将演变成同具价值的数字世界</div>
-                </div>
-                <div class="border"></div>
-                <div>
-                    <div class="words1">我们非常确定</div>
-                    <div class="words2">我们能让你更容易创造和体验未来的数字世界</div>
-                </div>
-                <div class="border"></div>
-                <div>
-                    <div class="words1">我们不会放弃</div>
-                    <div class="words2">与收藏夹们共建链上游戏生态的数字现实时间</div>
+        </div>
+        <div class="content why">
+            <div class="center-content">
+                <div class="space">为什么叫modern point</div>
+                <div class="space2">
+                    一切数据皆可复制的时代，modern point NFT让你拥有一份独家数字藏品，让你拥有一份唯一游戏权益
                 </div>
-                <div class="border"></div>
-                <div class="word-item">
-                    <div class="words1 words3">此为，第九空间</div>
-                    <more-title>了解更多</more-title>
+                <div class="th">
+                    <div>
+                        <div class="words1">我们始终坚信</div>
+                        <div class="words2">未来的虚拟世界将演变成同具价值的数字世界</div>
+                    </div>
+                    <div class="border"></div>
+                    <div>
+                        <div class="words1">我们非常确定</div>
+                        <div class="words2">我们能让你更容易创造和体验未来的数字世界</div>
+                    </div>
+                    <div class="border"></div>
+                    <div>
+                        <div class="words1">我们不会放弃</div>
+                        <div class="words2">与收藏夹们共建链上游戏生态的数字现实时间</div>
+                    </div>
+                    <div class="border"></div>
+                    <div class="word-item">
+                        <div class="words1 words3">此为，modern point</div>
+                        <more-title>了解更多</more-title>
+                    </div>
                 </div>
             </div>
         </div>
@@ -267,23 +271,24 @@ export default {
 <style lang="less" scoped>
 .topBox {
     width: 100%;
-    height: 460px;
+    height: 550px;
 }
 .container {
     position: relative;
+    background-color: @bg;
     .title-img {
         width: 55%;
         height: 460px;
         display: inline-block;
         position: absolute;
-        top: 0;
+        top: 90px;
         right: 0px;
     }
 
     .top {
         position: absolute;
         width: 100%;
-        top: 0;
+        top: 90px;
         left: 0;
         right: 0;
         z-index: 88;
@@ -324,8 +329,8 @@ export default {
             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;
+            color: #fff;
+            border-color: #fff;
         }
     }
 }
@@ -353,7 +358,7 @@ export default {
         .name {
             font-size: 16px;
             font-weight: bold;
-            color: #ffffff;
+            color: #26273c;
             line-height: 24px;
             &.name1 {
                 margin: 10px 0 4px 0;
@@ -392,18 +397,18 @@ export default {
     font-size: 24px;
     text-align: center;
     font-weight: 400;
-    color: #ffffff;
+    color: #26273c;
     line-height: 34px;
     font-family: ZhenyanGB-Regular, ZhenyanGB;
     padding: 80px 0 40px;
 }
 .content {
-    background: #0f1111;
+    background: #fff;
     .hot {
         font-size: 24px;
         text-align: center;
         font-weight: 400;
-        color: #ffffff;
+        color: #26273c;
         line-height: 34px;
         font-family: ZhenyanGB-Regular, ZhenyanGB;
         padding: 100px 0 50px;
@@ -441,7 +446,7 @@ export default {
         font-size: 24px;
         text-align: center;
         font-weight: 400;
-        color: #ffffff;
+        color: #26273c;
         line-height: 34px;
         padding: 60px 0 50px;
         font-family: ZhenyanGB-Regular, ZhenyanGB;
@@ -481,18 +486,19 @@ export default {
         align-items: center;
         justify-content: space-between;
         .box {
-            .line();
             width: 580px;
             height: 114px;
-            border: 1px solid;
+            border: 1px solid #ebeff1;
             margin-bottom: 30px;
             cursor: inherit;
+            background: #fff;
+            border-radius: 8px;
             .box1 {
                 margin: 30px 0 0 40px;
                 .text1 {
                     font-size: 18px;
                     font-weight: bold;
-                    color: #ffffff;
+                    color: #26273c;
                     line-height: 24px;
                     margin-bottom: 6px;
                 }
@@ -505,13 +511,17 @@ export default {
             }
         }
     }
+}
+
+.why {
+    overflow: hidden;
     .space {
         height: 34px;
         font-size: 24px;
         text-align: center;
         margin: 100px 0 8px;
         font-weight: 400;
-        color: #ffffff;
+        color: #26273c;
         font-family: ZhenyanGB-Regular, ZhenyanGB;
         line-height: 34px;
     }
@@ -526,7 +536,7 @@ export default {
     .th {
         display: flex;
         justify-content: space-between;
-        background: #131414;
+        background: #fff;
         border-radius: 8px;
         height: 175px;
         align-items: center;
@@ -535,12 +545,12 @@ export default {
         .border {
             width: 1px;
             height: 115px;
-            background: #494a4d;
+            background: #ebeff1;
         }
         .words1 {
             font-size: 18px;
             font-weight: 400;
-            color: #ffffff;
+            color: #26273c;
             line-height: 25px;
             // margin: 12px 0;
             &.words3 {
@@ -565,14 +575,13 @@ export default {
             .name {
                 font-size: 16px;
                 font-weight: 400;
-                color: #ffffff;
+                color: #26273c;
                 line-height: 24px;
                 margin: 0 10px;
             }
         }
     }
 }
-
 .list {
     margin: -16px;
     .collect {

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

@@ -1,9 +1,11 @@
 <template>
     <el-container direction="vertical">
         <page-header></page-header>
-        <el-container direction="vertical" style="padding: 0" class="page-content">
+        <el-container direction="vertical" style="padding: 0;" class="page-content">
             <el-main class="main">
                 <router-view v-if="!loading" />
+                <img src="../assets/img/bg1.png" class="bg1" alt="" />
+                <img src="../assets/img/bg2.png" class="bg2" alt="" />
             </el-main>
             <el-footer
                 v-if="
@@ -84,22 +86,42 @@ export default {
 <style lang="less" scoped>
 .main {
     // min-height: 1300px;
-    background: #1a1a1a;
+    background: @bg1;
     padding: 0;
     min-height: calc(100vh - 270px);
+    position: relative;
+    .bg1 {
+        width: 693px;
+        height: 575px;
+        display: block;
+        position: absolute;
+        right: 0;
+        top: -70px;
+    }
+
+    .bg2 {
+        width: 542px;
+        height: 651px;
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: -170px;
+    }
 }
+
 .bottom {
-    background: #1a1a1a;
+    background: #f6f9ff;
     height: 170px !important;
 }
 .el-footer {
     width: 100%;
     position: relative;
-    background: #0f1111;
+    background: #f6f9ff;
     // padding: 0 !important;
     height: 170px !important;
     display: flex;
     flex-direction: column;
+    padding: 0 0;
 
     .footer {
         display: flex;
@@ -109,14 +131,14 @@ export default {
         .footer-l {
             display: flex;
             .logo {
-                width: 170px;
-                height: 60px;
-                margin: 9px 30px 0 0;
+                width: 101px;
+                height: 70px;
+                margin: 9px 40px 0 0;
             }
             .text1 {
                 font-size: 18px;
                 font-weight: 400;
-                color: #ffffff;
+                color: #26273c;
                 line-height: 25px;
                 margin-bottom: 15px;
             }
@@ -152,7 +174,7 @@ export default {
                     .name {
                         font-size: 12px;
                         font-weight: 400;
-                        color: #ffffff;
+                        color: #26273c;
                         line-height: 16px;
                         margin-left: 10px;
                     }
@@ -164,7 +186,7 @@ export default {
 .copyright {
     width: 100%;
     text-align: center;
-    background: #0f1111;
+    background: #fff;
     height: 36px;
     line-height: 36px;
     font-size: 12px;