首页&铸造者

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

@@ -1,5 +1,5 @@
 <template>
     <div id="app">
-        <router-view style="min-width: 1200px" />
+        <router-view />
     </div>
 </template>

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

@@ -1,32 +1,105 @@
 <template>
     <div class="container">
-        <div class="header"></div>
-        <div class="center-item">
-            <router-link to="/Home" class="link">我的</router-link>
-            <router-link to="/casting" class="link">铸造</router-link>
+        <div class="header">
+            <img class="logo" src="../assets/img/nav_logo@3x.png" alt="" />
+            <div class="content">
+                <div class="tabs">
+                    <div
+                        class="tab"
+                        :class="{ active: active === item }"
+                        v-for="(item, index) in tabs"
+                        :key="index"
+                        @click="tab(item)"
+                    >
+                        {{ item }}
+                        <div class="slip" :class="{ active: item === active }"></div>
+                    </div>
+                </div>
+                <div class="login">[登录]</div>
+                <div class="login login1">中文</div>
+            </div>
         </div>
     </div>
 </template>
 <script>
-export default {};
+export default {
+    data() {
+        return {
+            tabs: ['铸造者', '收藏探索', '数字盲盒', '我的NFT', '了解更多'],
+            active: ''
+        };
+    },
+    methods: {
+        tab(item) {
+            this.active = item;
+            if (item === '铸造者') {
+                this.$router.push('/casting');
+            }
+        }
+    }
+};
 </script>
 <style lang="less" scoped>
 .container {
-    background: #000;
+    height: 90px;
+    background: #0f1111;
     .header {
-        background: #fff;
-    }
-    .center-item {
-        padding: 0 80px;
-        .link {
-            &:first-child {
-                font-size: 12px;
-                color: #ffffff;
-                line-height: 17px;
-            }
+        display: flex;
+        align-items: center;
+        .logo {
+            width: 170px;
+            height: 60px;
+            padding: 15px 538px 15px 30px;
         }
-        &:not(:last-child) {
-            border-right: 1px solid #acacac;
+        .content {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .tabs {
+                display: flex;
+                align-items: center;
+                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;
+                    }
+                    .slip {
+                        width: 26px;
+                        margin: 0 auto;
+                        padding-bottom: 13px;
+                        &.active {
+                            border-bottom: 2px solid #fff;
+                            border-radius: 2px;
+                        }
+                    }
+                }
+            }
+            .login {
+                width: 83px;
+                height: 30px;
+                border-radius: 4px;
+                border: 1px solid;
+                border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
+                line-height: 30px;
+                text-align: center;
+                color: #00ffcb;
+                font-size: 16px;
+                margin: 0 30px 0 30px;
+                .login1 {
+                    border: 1px solid #939599;
+                    color: #939599;
+                    border-image: linear-gradient(0);
+                    margin: 0;
+                }
+            }
         }
     }
 }

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

@@ -0,0 +1,154 @@
+<template>
+    <div>
+        <div class="box">
+            <div class="content" v-for="(item, index) in list" :key="index">
+                <img class="imgBox" src="../assets/img/888.jpg" alt="" />
+                <div class="introduce">{{ item.name }}</div>
+                <div class="price">
+                    <img class="img1" src="../assets/img/icon_jiage@3x.png" alt="" />
+                    <div class="num">{{ item.price }}</div>
+                </div>
+                <div class="border"></div>
+                <div class="fans">
+                    <div class="text">
+                        <div class="text1 name1">
+                            <img class="text2" src="../assets/img/888.jpg" alt="" />
+                            <div class="text3">铸造者</div>
+                        </div>
+                        <div class="text1">
+                            <img class="text2" src="../assets/img/888.jpg" alt="" />
+                            <div class="text3">持有者</div>
+                        </div>
+                    </div>
+                    <div class="text">
+                        <div class="text1">
+                            <img class="text2 text4" src="../assets/img/icon-dianzan@3x.png" alt="" />
+                            <div class="text3">16</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="all">
+            <img class="img1" src="../assets/img/icon_inter@3x.png" alt="" />
+            <div class="name">查看更多</div>
+            <img class="img1" src="../assets/img/icon_inter@3x (3).png" alt="" />
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            list: [
+                { name: '游戏《百分之一》精美皮肤-恶…', price: '320' },
+                { name: '游戏《百分之一》精美皮肤-恶…', price: '320' },
+                { name: '游戏《百分之一》精美皮肤-恶…', price: '320' },
+                { name: '游戏《百分之一》精美皮肤-恶…', price: '320' }
+            ]
+        };
+    }
+};
+</script>
+<style lang="less" scoped>
+.box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 10px;
+    .content {
+        width: 276px;
+        height: 416px;
+        background: #1c1e26;
+        margin-bottom: 32px;
+
+        border: 1px solid;
+        margin-right: 32px;
+        border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
+        .imgBox {
+            height: 266px;
+            width: 100%;
+            // border-radius: 8px 8px 0px 0px;
+        }
+        .introduce {
+            padding: 10px 16px 6px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 20px;
+        }
+        .price {
+            display: flex;
+            align-items: center;
+            padding: 0 0 16px 16px;
+            .img1 {
+                width: 10px;
+                height: 11px;
+                margin-top: 10px;
+            }
+            .num {
+                font-size: 30px;
+                font-family: OSP-DIN, OSP;
+                font-weight: normal;
+                color: #00ffcb;
+                line-height: 30px;
+            }
+        }
+        .border {
+            height: 1px;
+            background: #494a4d;
+            border-radius: 1px;
+            margin: 0 16px;
+        }
+        .fans {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 19px 16px 20px;
+            .text {
+                display: flex;
+                align-items: center;
+                .text1 {
+                    display: flex;
+                    align-items: center;
+                    &.name1 {
+                        margin-right: 22px;
+                    }
+                    .text2 {
+                        width: 20px;
+                        height: 20px;
+                        border-radius: 50%;
+                        margin-right: 4px;
+                        &.text4 {
+                            width: 18px;
+                            height: 18px;
+                        }
+                    }
+                    .text3 {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #939599;
+                        line-height: 24px;
+                    }
+                }
+            }
+        }
+    }
+}
+.all {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    .img1 {
+        width: 32px;
+        height: 24px;
+    }
+    .name {
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 24px;
+        margin: 0 10px;
+    }
+}
+</style>

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

@@ -5,8 +5,8 @@ import store from './store';
 import http from './plugins/http';
 import ElementUI from 'element-ui';
 ElementUI.Dialog.props.closeOnClickModal.default = false;
-import './styles/common.less';
-import './styles/font.less';
+// import './styles/common.less';
+// import './styles/font.less';
 // import './styles/app.less';
 
 Vue.prototype.$colors = {

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

@@ -1,3 +1,203 @@
 <template>
-    <div>铸造</div>
+    <div class="container">
+        <div class="title">游戏数字资产的链上开创者们</div>
+        <div class="tabs">
+            <div
+                class="tab"
+                :class="{ active: active === item }"
+                v-for="(item, index) in tabs"
+                :key="index"
+                @click="tab(item)"
+            >
+                {{ item }}
+            </div>
+        </div>
+        <div class="border"></div>
+        <el-input placeholder="请输入内容" v-model="input" clearable> </el-input>
+        <div class="content">
+            <img class="imgBox" src="../assets/img/888.jpg" alt="" />
+            <img class="img" src="../assets/img/888.jpg" alt="" />
+            <div class="text">
+                <div class="name">创作者姓名</div>
+                <img class="img1" src="../assets/img/renzheng_icon@3x.png" alt="" />
+            </div>
+            <div class="text">
+                <div class="name name1">338392</div>
+                <img class="img1 img2" src="../assets/img/copy_icon@3x.png" alt="" />
+            </div>
+            <div class="introduce">
+                介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍...
+            </div>
+            <div class="border"></div>
+            <div class="fans">
+                <div>
+                    <div class="text3">2111</div>
+                    <div class="text4">粉丝</div>
+                </div>
+                <div class="follow">关注</div>
+            </div>
+        </div>
+    </div>
 </template>
+<script>
+export default {
+    data() {
+        return {
+            tabs: ['全部', '最新', '人气', '关注'],
+            active: '全部',
+            input: ''
+        };
+    },
+    methods: {
+        tab(item) {
+            this.active = item;
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    background: #0f1111;
+    padding-left: 200px;
+    padding-bottom: 100px;
+    /deep/ .el-input__inner {
+        background: #0f1111;
+        width: 280px;
+        height: 42px;
+        color: #fff;
+        border-radius: 8px;
+        border: 1px solid #898989;
+        margin: 30px 0 50px;
+    }
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0;
+        text-align: left;
+    }
+    .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;
+        background: #1c1e26;
+
+        margin-bottom: 32px;
+        border: 1px solid;
+        border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
+        position: relative;
+        .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 {
+            padding: 10px 16px 16px;
+            height: 60px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 20px;
+        }
+        .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;
+                border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
+            }
+        }
+    }
+}
+</style>

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

@@ -1,16 +1,306 @@
 <template>
-    <div class="container">我的</div>
+    <div>
+        <div class="container">
+            <div class="title">游戏数字资产的链上开创者们</div>
+            <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
+            <div class="btn">立即探索</div>
+        </div>
+        <div class="introduce">
+            <div class="introduce2">
+                <img class="img1" src="../assets/img/888.jpg" alt="" />
+                <div>
+                    <div class="name">本期推荐：创作者姓名</div>
+                    <div class="name name1">作者简介</div>
+                    <div class="name2">
+                        介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍…
+                    </div>
+                </div>
+            </div>
+            <img class="img2" src="../assets/img/888.jpg" alt="" />
+            <img class="img2" src="../assets/img/888.jpg" alt="" />
+            <img class="img2" src="../assets/img/888.jpg" alt="" />
+        </div>
+        <div class="hot">最HOT收藏品</div>
+        <goods-info></goods-info>
+        <div class="hot">官方活动</div>
+        <div class="imgBox">
+            <img class="imgBox1" src="../assets/img/888.jpg" alt="" />
+            <img class="imgBox1" src="../assets/img/888.jpg" alt="" />
+        </div>
+        <div class="all">
+            <img class="img1" src="../assets/img/icon_inter@3x.png" alt="" />
+            <div class="name">查看更多</div>
+            <img class="img1" src="../assets/img/icon_inter@3x (3).png" alt="" />
+        </div>
+        <!-- <div> -->
+        <div class="describe">
+            <div class="box">
+                <div class="box1">
+                    <div class="text1">发现</div>
+                    <div class="text2">和你一起探索，全球最有才华的开发者铸造开创性NFT数字游戏藏品</div>
+                </div>
+            </div>
+            <div class="box">
+                <div class="box1">
+                    <div class="text1">交易</div>
+                    <div class="text2">方便快捷-无需数字钱包，人民币支付即可购买和出售游戏资产收藏品</div>
+                </div>
+            </div>
+        </div>
+        <div class="describe">
+            <div class="box">
+                <div class="box1">
+                    <div class="text1">收集</div>
+                    <div class="text2">用稀有和独特的数字宝藏增加库存，成为全球首批游戏数字资产收藏家</div>
+                </div>
+            </div>
+            <div class="box">
+                <div class="box1">
+                    <div class="text1">使命</div>
+                    <div class="text2">让每个游戏资产都能获得“电子身份证”，让每位收藏家都能获得区块链“数字指纹”</div>
+                </div>
+            </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="border"></div>
+            <div>
+                <div class="words1">我们始终坚信</div>
+                <div class="all">
+                    <img class="img1" src="../assets/img/icon_inter@3x.png" alt="" />
+                    <div class="name">了解更多</div>
+                    <img class="img1" src="../assets/img/icon_inter@3x (3).png" alt="" />
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 <script>
+import goodsInfo from '../components/goodsInfo.vue';
 export default {
+    components: { goodsInfo },
     data() {
-        return {
-            list: '666'
-        };
+        return {};
     },
-    mounted() {
-        console.log(this.list);
-    }
+    mounted() {}
 };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.container {
+    padding-left: 17.5%;
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 130px 0 24px 10px;
+        text-align: left;
+    }
+    .title2 {
+        font-size: 30px;
+        font-weight: 400;
+        color: #939599;
+        line-height: 42px;
+        padding-left: 10px;
+    }
+    .btn {
+        width: 136px;
+        height: 44px;
+        line-height: 44px;
+        text-align: center;
+        margin: 50px 0 183px 10px;
+        font-size: 24px;
+        color: #00ffcb;
+        border: 1px solid;
+        border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
+    }
+}
+.introduce {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .introduce2 {
+        display: flex;
+        align-items: center;
+        .img1 {
+            width: 180px;
+            height: 180px;
+            border-radius: 8px;
+            margin-right: 16px;
+        }
+        .name {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24px;
+            &.name1 {
+                margin: 10px 0 4px 0;
+            }
+        }
+        .name2 {
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 20px;
+            width: 254px;
+            height: 100px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    .img2 {
+        width: 220px;
+        height: 180px;
+        border-radius: 8px;
+        margin-left: 30px;
+    }
+}
+.hot {
+    font-size: 24px;
+    width: 100%;
+    text-align: center;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 34px;
+    margin: 100px 0 50px;
+}
+.imgBox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .imgBox1 {
+        width: 585px;
+        height: 260px;
+        border-radius: 8px;
+        margin-right: 30px;
+    }
+}
+.all {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    margin: 40px 0 60px;
+    .img1 {
+        width: 32px;
+        height: 24px;
+    }
+    .name {
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 24px;
+        margin: 0 10px;
+    }
+}
+.describe {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .box {
+        width: 580px;
+        height: 114px;
+        background: #0f1111;
+        border-radius: 8px;
+        border: 1px solid;
+        margin-right: 30px;
+        margin-bottom: 30px;
+        border-image: linear-gradient(
+                174deg,
+                rgba(0, 255, 203, 0.6),
+                rgba(0, 209, 220, 0.1),
+                rgba(0, 151, 240, 0.1),
+                rgba(0, 110, 255, 0.5)
+            )
+            1 1;
+        .box1 {
+            margin: 30px 0 0 40px;
+            .text1 {
+                font-size: 18px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 24px;
+                margin-bottom: 6px;
+            }
+            .text2 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+            }
+        }
+    }
+}
+.space {
+    height: 34px;
+    font-size: 24px;
+    text-align: center;
+    margin: 100px 0 8px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 34px;
+}
+.space2 {
+    font-size: 16px;
+    font-weight: 400;
+    text-align: center;
+    color: #939599;
+    line-height: 24px;
+    margin-bottom: 60px;
+}
+.th {
+    display: flex;
+    justify-content: center;
+    .border {
+        width: 1px;
+        height: 115px;
+        background: #494a4d;
+        margin: 0 30px 100px;
+    }
+    .words1 {
+        font-size: 18px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 25px;
+        margin: 12px 0;
+    }
+    .words2 {
+        width: 240px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #939599;
+        line-height: 24px;
+    }
+    .all {
+        display: flex;
+        align-content: center;
+        .img1 {
+            width: 32px;
+            height: 24px;
+        }
+        .name {
+            font-size: 16px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 24px;
+            margin: 0 10px;
+        }
+    }
+}
+</style>

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

@@ -7,7 +7,45 @@
                     <router-view />
                 </keep-alive>
             </el-main>
-            <el-footer height="246px">Footer</el-footer>
+            <el-footer>
+                <div class="footer">
+                    <div class="footer-l">
+                        <img class="logo" src="../assets/img/nav_logo@3x.png" alt="" />
+                        <div>
+                            <div class="text1">加入创造者生态</div>
+                            <div class="text2">让我们成为一批游戏NFT的弄潮儿</div>
+                            <div class="text2">若您合您的团队想要铸造NFT,请联系：NFT@space.com</div>
+                        </div>
+                    </div>
+                    <div class="footer-r">
+                        <div class="slogan">
+                            <img class="logo1" src="../assets/img/copy_icon@3x.png" alt="" />
+                            <img class="logo1" src="../assets/img/copy_icon@3x.png" alt="" />
+                            <img class="logo1" src="../assets/img/copy_icon@3x.png" alt="" />
+                            <img class="logo1" src="../assets/img/copy_icon@3x.png" alt="" />
+                        </div>
+                        <div class="content">
+                            <div class="content1">
+                                <img class="logo2" src="../assets/img/copy_icon@3x.png" alt="" />
+                                <div class="name">联系我们</div>
+                            </div>
+                            <div class="content1">
+                                <img class="logo2" src="../assets/img/copy_icon@3x.png" alt="" />
+                                <div class="name">联系我们</div>
+                            </div>
+                            <div class="content1">
+                                <img class="logo2" src="../assets/img/copy_icon@3x.png" alt="" />
+                                <div class="name">联系我们</div>
+                            </div>
+                            <div class="content1">
+                                <img class="logo2" src="../assets/img/copy_icon@3x.png" alt="" />
+                                <div class="name">联系我们</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="copyright">© 2012 - 2021 **** 版权所有</div>
+            </el-footer>
         </el-container>
     </el-container>
 </template>
@@ -19,94 +57,87 @@ export default {
 </script>
 <style lang="less" scoped>
 #app {
-    min-height: 100vh;
+    // min-height: 100vh;
+}
+.el-main {
+    min-height: 1000px;
+    background: #0f1111;
+    // padding-left: 200px;
 }
 .el-footer {
-    // background-color: @warn;
-    background: #ccc;
-    padding: 0;
     position: relative;
-    // .flex-col();
-    // display: flex;
-    // flex-direction: column;
-    &::before {
-        content: '';
-        height: 6px;
-        display: block;
-        // background-color: @prim;
-    }
-
-    .footer-content {
-        justify-content: center;
-        // padding-bottom: 55px;
-        padding-top: 42px;
-        // .flex();
-        // .left {
-        //     min-width: 240px;
-        // }
-        .name {
-            font-size: 12px;
-            font-weight: 600;
-            color: #ffffff;
-            line-height: 17px;
-            text-align: center;
+    background: #0f1111;
+    height: 170px !important;
+    .footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 170px;
+        line-height: 170px;
+        padding: 0 220px;
+        .footer-l {
+            display: flex;
+            .logo {
+                width: 170px;
+                height: 60px;
+                margin: 9px 30px 0 0;
+            }
+            .text1 {
+                font-size: 18px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 25px;
+                margin-bottom: 15px;
+            }
+            .text2 {
+                font-size: 12px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 17px;
+            }
         }
-        .center {
-            width: 438px;
-            // .flex();
-            .center-item {
-                padding: 0 80px;
-                .link {
-                    &:first-child {
+        .footer-r {
+            .slogan {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                margin-bottom: 40px;
+                .logo1 {
+                    width: 24px;
+                    height: 24px;
+                    margin-left: 40px;
+                }
+            }
+            .content {
+                display: flex;
+                align-items: center;
+                .content1 {
+                    display: flex;
+                    margin-left: 40px;
+                    .logo2 {
+                        width: 16px;
+                        height: 16px;
+                    }
+                    .name {
                         font-size: 12px;
+                        font-weight: 400;
                         color: #ffffff;
-                        line-height: 17px;
+                        line-height: 16px;
+                        margin-left: 10px;
                     }
-                    display: block;
-                    font-size: 12px;
-                    color: #acacac;
-                    line-height: 17px;
-                    margin-top: 12px;
-                    cursor: pointer;
-
-                    &:hover {
-                        // color: @prim;
-                        text-decoration: underline;
-                    }
-                }
-
-                &:not(:last-child) {
-                    border-right: 1px solid #acacac;
                 }
             }
         }
-        position: relative;
     }
 }
-.el-aside {
-    background-color: #d3dce6;
-    color: #333;
-    text-align: center;
-    line-height: 200px;
-}
-
-.el-main {
-    background-color: #e9eef3;
-    color: #333;
+.copyright {
+    width: 100%;
     text-align: center;
-    line-height: 160px;
-}
-
-body > .el-container {
-    margin-bottom: 40px;
-}
-
-.el-container:nth-child(5) .el-aside,
-.el-container:nth-child(6) .el-aside {
-    line-height: 260px;
-}
-
-.el-container:nth-child(7) .el-aside {
-    line-height: 320px;
+    background: #0f1111;
+    height: 36px;
+    line-height: 36px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #565b66;
 }
 </style>