我的

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

@@ -15,10 +15,16 @@
                         <div class="slip" :class="{ active: item === active }"></div>
                     </div>
                 </div>
-                <div class="login">[登录]</div>
+                <div class="login" @click="Login">[登录]</div>
                 <div class="login login1">中文</div>
             </div>
         </div>
+        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 <script>
@@ -26,7 +32,8 @@ export default {
     data() {
         return {
             tabs: ['铸造者', '收藏探索', '数字盲盒', '我的NFT', '了解更多'],
-            active: ''
+            active: '',
+            dialogVisible: false
         };
     },
     methods: {
@@ -41,6 +48,16 @@ export default {
             } else if (item === '我的NFT') {
                 this.$router.push('/my');
             }
+        },
+        handleClose(done) {
+            this.$confirm('确认关闭？')
+                .then(_ => {
+                    done();
+                })
+                .catch(_ => {});
+        },
+        Login() {
+            this.dialogVisible = true;
         }
     }
 };

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

@@ -8,8 +8,7 @@
                     <img class="img1" src="../assets/img/icon_jiage@3x.png" alt="" />
                     <div class="num">{{ item.price }}</div>
                     <div class="time" v-if="flagId == 1">
-                        <div class="time1">抢购倒计时</div>
-                        <div class="time2">1天 01:35:06</div>
+                        <div class="time1">抢购倒计时<span>1天 01:35:06</span></div>
                     </div>
                 </div>
                 <div class="border"></div>
@@ -114,7 +113,7 @@ export default {
                     color: #939599;
                     line-height: 24px;
                 }
-                .time2 {
+                span {
                     font-size: 14px;
                     font-weight: 400;
                     color: #00ffcb;

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

@@ -1,8 +1,10 @@
 <template>
     <div class="container">
-        <div class="title">游戏数字资产的链上开创者们</div>
-        <div class="title2">全球领先的游戏数字藏品NFT集结地</div>
-        <div class="btn">立即探索</div>
+        <div class="top">
+            <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="" />
@@ -10,7 +12,8 @@
                     <div class="name">本期推荐：创作者姓名</div>
                     <div class="name name1">作者简介</div>
                     <div class="name2">
-                        介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍…
+                        介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍
+                        介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍…
                     </div>
                 </div>
             </div>
@@ -18,77 +21,83 @@
             <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="all all1">
-            <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 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 class="content">
+            <div class="hot">最HOT收藏品</div>
+            <goods-info></goods-info>
+            <div class="all all1">
+                <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 class="describe">
-            <div class="box">
-                <div class="box1">
-                    <div class="text1">发现</div>
-                    <div class="text2">和你一起探索，全球最有才华的开发者铸造开创性NFT数字游戏藏品</div>
-                </div>
+        <div class="content1">
+            <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="box">
-                <div class="box1">
-                    <div class="text1">交易</div>
-                    <div class="text2">方便快捷-无需数字钱包，人民币支付即可购买和出售游戏资产收藏品</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>
-        <div class="describe">
-            <div class="box">
-                <div class="box1">
-                    <div class="text1">收集</div>
-                    <div class="text2">用稀有和独特的数字宝藏增加库存，成为全球首批游戏数字资产收藏家</div>
+            <div class="describe">
+                <div class="box">
+                    <div class="box1">
+                        <div class="text1">发现</div>
+                        <div class="text2">和你一起探索，全球最有才华的开发者铸造开创性NFT数字游戏藏品</div>
+                    </div>
                 </div>
-            </div>
-            <div class="box">
-                <div class="box1">
-                    <div class="text1">使命</div>
-                    <div class="text2">让每个游戏资产都能获得“电子身份证”，让每位收藏家都能获得区块链“数字指纹”</div>
+                <div class="box">
+                    <div class="box1">
+                        <div class="text1">交易</div>
+                        <div class="text2">方便快捷-无需数字钱包，人民币支付即可购买和出售游戏资产收藏品</div>
+                    </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 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 class="border"></div>
-            <div>
-                <div class="words1">我们始终坚信</div>
-                <div class="words2">未来的虚拟世界将演变成同具价值的数字世界</div>
+            <div class="space">为什么叫第九空间</div>
+            <div class="space2">
+                一切数据皆可复制的时代，第九空间NFT让你拥有一份独家数字藏品，让你拥有一份唯一游戏权益
             </div>
-            <div class="border"></div>
-            <div>
-                <div class="words1 words3">我们始终坚信</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 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 words3">此为，第九空间</div>
+                    <div class="th2">
+                        <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>
@@ -106,38 +115,46 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
-    padding: 0 200px;
-    .title {
-        height: 42px;
-        font-size: 32px;
-        font-weight: 400;
-        color: #ffffff;
-        line-height: 42px;
-        padding: 130px 0 24px 10px;
-    }
-    .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;
+    .top {
+        padding: 0 200px;
+        background: #0f1111;
+        height: 460px;
+        .title {
+            height: 42px;
+            font-size: 32px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 42px;
+            padding: 130px 0 24px 10px;
+        }
+        .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 0 10px;
+            position: relative;
+            font-size: 24px;
+            color: #00ffcb;
+            border: 1px solid;
+            border-radius: 8px;
+            background-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
+        }
     }
 }
 .introduce {
+    padding: 0 200px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    height: 300px;
     .introduce2 {
         display: flex;
         align-items: center;
@@ -174,129 +191,66 @@ export default {
         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: space-between;
-    .imgBox1 {
-        width: 585px;
-        height: 260px;
-        border-radius: 8px;
-    }
-}
-.all {
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    margin: 40px 0 60px;
-    &.all1 {
-        margin: 0;
-    }
-    .img1 {
-        width: 32px;
-        height: 24px;
-    }
-    .name {
-        font-size: 16px;
+.content {
+    background: #0f1111;
+    padding: 0 200px;
+    .hot {
+        font-size: 24px;
+        text-align: center;
         font-weight: 400;
         color: #ffffff;
-        line-height: 24px;
-        margin: 0 10px;
+        line-height: 34px;
+        padding: 100px 0 50px;
     }
-}
-.describe {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .box {
-        width: 580px;
-        height: 114px;
-        background: #0f1111;
-        border-radius: 8px;
-        border: 1px solid;
-        margin-bottom: 30px;
-        border-image: linear-gradient(
-                143deg,
-                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;
-            }
+    .all {
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        padding-bottom: 40px;
+        &.all1 {
+            margin: 0;
+        }
+        .img1 {
+            width: 32px;
+            height: 24px;
+        }
+        .name {
+            font-size: 16px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 24px;
+            margin: 0 10px;
         }
     }
 }
-.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: space-between;
-    padding: 0 50px;
-    .border {
-        width: 1px;
-        height: 115px;
-        background: #494a4d;
-        margin: 0 30px 100px;
-    }
-    .words1 {
-        font-size: 18px;
+.content1 {
+    padding: 0 200px;
+    .hot {
+        font-size: 24px;
+        text-align: center;
         font-weight: 400;
         color: #ffffff;
-        line-height: 25px;
-        margin: 12px 0;
-        &.words3 {
-            text-align: center;
-        }
+        line-height: 34px;
+        padding: 60px 0 50px;
     }
-    .words2 {
-        width: 240px;
-        font-size: 16px;
-        font-weight: 400;
-        color: #939599;
-        line-height: 24px;
+    .imgBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .imgBox1 {
+            width: 585px;
+            height: 260px;
+            border-radius: 8px;
+        }
     }
     .all {
         display: flex;
         align-content: center;
+        justify-content: center;
+        margin: 40px 0 60px;
+        &.all1 {
+            margin: 0;
+        }
         .img1 {
             width: 32px;
             height: 24px;
@@ -309,5 +263,106 @@ export default {
             margin: 0 10px;
         }
     }
+    .describe {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .box {
+            width: 580px;
+            height: 114px;
+            background: #0f1111;
+            border-radius: 8px;
+            border: 1px solid;
+            margin-bottom: 30px;
+            border-image: linear-gradient(
+                    143deg,
+                    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: 30px;
+    }
+    .th {
+        display: flex;
+        justify-content: space-between;
+        background: #131414;
+        border-radius: 8px;
+        height: 175px;
+        align-items: center;
+        padding: 0 50px;
+        margin-bottom: 70px;
+        .border {
+            width: 1px;
+            height: 115px;
+            background: #494a4d;
+        }
+        .words1 {
+            font-size: 18px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 25px;
+            margin: 12px 0;
+            &.words3 {
+                text-align: center;
+            }
+        }
+        .words2 {
+            width: 240px;
+            font-size: 16px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
+        }
+        .th2 {
+            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/My.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="container">
+        <div class="title">我的 NFT</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>
+        <search-info></search-info>
+        <goods-info></goods-info>
+        <!-- <div>
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="currentPage4"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="100"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="400"
+            >
+            </el-pagination>
+        </div> -->
+    </div>
+</template>
+<script>
+import GoodsInfo from '../components/GoodsInfo.vue';
+import SearchInfo from '../components/SearchInfo.vue';
+export default {
+    components: { GoodsInfo, SearchInfo },
+    data() {
+        return {
+            tabs: ['我拥有的(10)', '我卖出的(5)', '我铸造的(8)'],
+            active: '我拥有的',
+            currentPage4: 4
+        };
+    },
+    methods: {
+        tab(item) {
+            this.active = item;
+        },
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    padding: 0 200px;
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0;
+    }
+    .tabs {
+        display: flex;
+        align-items: center;
+        padding-bottom: 30px;
+        text-align: center;
+        .tab {
+            width: 140px;
+            border: 1px solid #939599;
+            height: 42px;
+            font-size: 18px;
+            font-weight: bold;
+            color: #949699;
+            line-height: 42px;
+            &.active {
+                color: #ffffff;
+                background: linear-gradient(46deg, #00ffcb 0%, #006eff 100%);
+            }
+            &:first-child {
+                border-radius: 8px 0px 0px 8px;
+            }
+            &:last-child {
+                border-radius: 0px 8px 8px 0px;
+            }
+        }
+    }
+    .border {
+        height: 1px;
+        background: #494a4d;
+        border-radius: 1px;
+    }
+
+    // .footer {
+    //     flex-shrink: 0;
+    // }
+}
+</style>

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

@@ -42,11 +42,11 @@
                         <div class="price2">含<span>5%</span>版税</div>
                     </div>
                     <div class="price1 num">
-                        <!-- <div> -->
-                        <div class="price2">数量</div>
-                        <!-- <span class="span">1</span> -->
-                        <!-- </div> -->
-                        <div class="price2">已售 0 / 剩余 50</div>
+                        <div class="num1">
+                            <div class="price2 num2">数量</div>
+                            <span class="span">1</span>
+                        </div>
+                        <div class="price2 num2">已售 0 / 剩余 50</div>
                     </div>
                     <div class="btn">一键预约</div>
                 </div>
@@ -55,16 +55,16 @@
                 </div>
                 <div class="card">
                     <div class="box1">
-                        <div class="a">数字权益卡</div>
-                        <div class="b">打开可见</div>
+                        <div class="box2">数字权益卡</div>
+                        <div class="box3">打开可见</div>
                     </div>
                     <div class="box1">
-                        <div class="a">数字权益卡</div>
-                        <div class="b">打开可见</div>
+                        <div class="box2">数字权益卡</div>
+                        <div class="box3">打开可见</div>
                     </div>
                     <div class="box1">
-                        <div class="a">数字权益卡</div>
-                        <div class="b">打开可见</div>
+                        <div class="box2">数字权益卡</div>
+                        <div class="box3">打开可见</div>
                     </div>
                 </div>
             </div>
@@ -75,7 +75,7 @@
                     <img class="imgs" src="../assets/img/icon-weixin@3x.png" alt="" />
                     <div class="info2">链上信息</div>
                 </div>
-                <div class="border"></div>
+
                 <img
                     class="info3"
                     @click="showMore = !showMore"
@@ -85,6 +85,7 @@
                     alt=""
                 />
             </div>
+            <div class="border" v-if="showMore"></div>
             <div class="info4" v-if="!showMore">
                 <div class="text1">Hash地址：f6b1a265b50717b4b1bae9dc6…</div>
                 <div class="text1">区块高度： 77259404</div>
@@ -95,7 +96,6 @@
                     <img class="imgs" src="../assets/img/icon-weixin@3x.png" alt="" />
                     <div class="info2">作品描述</div>
                 </div>
-                <div v-if="showMore1" class="border"></div>
                 <img
                     class="info3"
                     @click="showMore1 = !showMore1"
@@ -105,6 +105,7 @@
                     alt=""
                 />
             </div>
+            <div v-if="showMore1" class="border"></div>
             <div class="info4" v-if="!showMore1">
                 <div class="text1">Hash地址：f6b1a265b50717b4b1bae9dc6…</div>
                 <div class="text1">区块高度： 77259404</div>
@@ -115,7 +116,6 @@
                     <img class="imgs" src="../assets/img/icon-weixin@3x.png" alt="" />
                     <div class="info2">交易历史</div>
                 </div>
-                <div v-if="showMore2" class="border"></div>
                 <img
                     class="info3"
                     @click="showMore2 = !showMore2"
@@ -125,6 +125,7 @@
                     alt=""
                 />
             </div>
+            <div v-if="showMore2" class="border"></div>
             <div class="info4 rad1" v-if="!showMore2">
                 <div class="text1">Hash地址：f6b1a265b50717b4b1bae9dc6…</div>
                 <div class="text1">区块高度： 77259404</div>
@@ -161,7 +162,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
-    padding: 50px 200px 0;
+    padding: 50px 200px 200px;
     background: #1a1a1a;
     .top {
         display: flex;
@@ -296,6 +297,10 @@ export default {
                     justify-content: space-between;
                     border-bottom: 0;
                 }
+                .num1 {
+                    display: flex;
+                    align-items: center;
+                }
                 .span {
                     font-size: 14px;
                     font-weight: bold;
@@ -308,18 +313,22 @@ export default {
                     font-weight: 400;
                     color: #939599;
                     line-height: 24px;
+                    padding-top: 12px;
+                    &.num2 {
+                        padding-top: 0;
+                    }
                 }
                 .price3 {
                     width: 10px;
                     height: 11px;
-                    margin-left: 10px;
-                    margin: 6px 0 0 10px;
+                    margin: 18px 0 0 10px;
                 }
                 .price4 {
                     font-size: 40px;
                     font-weight: normal;
                     color: #00ffcb;
                     line-height: 36px;
+                    margin-right: 5px;
                 }
                 span {
                     font-size: 16px;
@@ -353,14 +362,14 @@ export default {
                 border-radius: 4px;
                 border: 1px solid;
                 border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
-                .a {
+                .box2 {
                     font-size: 14px;
                     font-weight: 400;
                     color: #939599;
                     line-height: 24px;
                     margin-top: 5px;
                 }
-                .b {
+                .box3 {
                     font-size: 14px;
                     font-weight: 400;
                     color: #ffffff;
@@ -396,16 +405,18 @@ export default {
                     line-height: 24px;
                 }
             }
-            .border {
-                height: 1px;
-                background: red;
-                border-radius: 1px;
-            }
+
             .info3 {
                 width: 24px;
                 height: 24px;
             }
         }
+        .border {
+            height: 1px;
+            background: #494a4d;
+            border-radius: 1px;
+            margin: 0 16px;
+        }
         .info4 {
             background: #1f2230;
             padding: 10px 0 20px 16px;