.

src/router/index.js

@@ -108,6 +108,15 @@ const routes = [
                     pageType: Page.Every,
                     menuPage: true
                 }
+            },
+            {
+                path: '/starMap',
+                name: 'starMap',
+                component: () => import('../views/StarMap.vue'),
+                meta: {
+                    pageType: Page.Every,
+                    menuPage: true
+                }
             }
         ]
     },
@@ -722,6 +731,14 @@ const routes = [
         name: 'faceAuth',
         component: () => import('../views/account/FaceAuth.vue'),
         meta: {}
+    },
+    {
+        path: '/starCreate',
+        name: 'starCreate',
+        component: () => import('../views/star/Create.vue'),
+        meta: {
+            tabColor: '#272B2E'
+        }
     }
 ];
 

src/views/Index.vue

@@ -41,6 +41,12 @@ export default {
                     icon: require('@assets/tabbar_icon_02.png'),
                     preIcon: require('@assets/tabbar_icon_02_pre.png')
                 },
+                {
+                    name: 'starMap',
+                    title: '星图',
+                    icon: require('@assets/tabbar_icon_05.png'),
+                    preIcon: require('@assets/tabbar_icon_05_pre.png')
+                },
                 {
                     name: 'store',
                     title: '藏品室',

src/views/StarMap.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="container">
+        <div class="bg">
+            <img src="@assets/png-xingtu-bg.png" alt="" />
+        </div>
+        <div class="top">
+            <div class="text1">欢迎您！探索者！</div>
+            <div class="text2">这里是“绿洲链上星图” ！</div>
+            <van-button
+                @click="$router.push('/starCreate')"
+                type="primary"
+                :icon="require('@assets/icon-zhuzaoxinghe.png')"
+                >立即铸造星图</van-button
+            >
+        </div>
+
+        <div class="tips">
+            <div class="text1">绿洲链上星图是什么</div>
+            <div class="text2">
+                <p>
+                    绿洲链上星图是属于每一个人的元宇宙物资铸造中心！在这里，每一个人都可以铸造自己的元宇宙物资，在OASISMETA绿洲元宇宙里进行展示与流通！
+                </p>
+                <p>
+                    绿洲链上星图也是使用“IPFS全球分布式存储技术”与“区块链确权技术”的永恒纪念之地！在这里，可以自由上传对您拥有重大意义的照片，比如全家福、孩子的满月照、宠物的Q懵形象、团队聚会的瞬间...让这些具有历史意义的照片，让他们在链上永存！
+                </p>
+                <p>
+                    当然！绿洲链上星图，欢迎优秀的艺术家与创作者！在这里，每一位艺术家都可以上传自己的艺术作品！在未来，绿洲星库将全面开放铸造与流通，更将从优秀的作品中选拔出最为优秀的作品，以绿洲名义进行全球发行！每一名艺术家与创作者都可以参与到OASISMETA绿洲元宇宙的共建中来！
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.container {
+    background-color: #272b2e;
+    position: relative;
+    & > div {
+        position: relative;
+        z-index: 1;
+    }
+
+    .bg {
+        position: absolute;
+        z-index: 0;
+    }
+}
+
+.top {
+    padding: 16px;
+    position: relative;
+    z-index: 1;
+    .text1 {
+        font-size: 14px;
+        font-weight: bold;
+        color: rgba(255, 255, 255, 0.5);
+        line-height: 24px;
+    }
+    .text2 {
+        font-size: 26px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 40px;
+        text-shadow: 0px 0px 0px #000000;
+    }
+    .van-button {
+        border-radius: 8px;
+        min-width: 154px;
+        margin-top: 16px;
+        display: block;
+        --van-button-icon-size: 24px;
+        --van-button-normal-font-size: 16px;
+        box-shadow: 0px 0px 6px 0px #b6ffde;
+        border: 1px solid #fff;
+    }
+}
+
+.tips {
+    background: rgba(0, 0, 0, 0.04);
+    border-radius: 8px;
+    border: 1px solid #ffffff20;
+    backdrop-filter: blur(40px);
+    margin: 8px 16px 0;
+    padding: 14px 16px;
+    .text1 {
+        text-align: center;
+        font-size: 14px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+    }
+
+    .text2 {
+        margin-top: 8px;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.6);
+        line-height: 18px;
+        p {
+            margin: 0;
+        }
+        p + p {
+            margin-top: 10px;
+        }
+    }
+}
+
+.bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    img {
+        width: 100%;
+        display: block;
+    }
+    &::after {
+        position: absolute;
+        content: '';
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(180deg, rgba(39, 43, 46, 0) 0%, #272b2e 100%);
+    }
+}
+</style>

src/views/star/Create.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="container">
+        <div class="steps">
+            <div class="step" v-for="(item, index) in steps" :key="index">
+                <div class="box">{{ index }}</div>
+                <div class="step-text">{{ item }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: 0,
+            steps: ['销毁藏品', '上传图片', '提交审核']
+        };
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+    background-color: #272b2e;
+}
+.steps {
+    background: #fcdfa2;
+    height: 72px;
+    .flex();
+    .step {
+        flex-grow: 1;
+        .flex-col();
+        align-items: center;
+        .box {
+            font-size: 10px;
+            color: #a2885c;
+            line-height: 12px;
+            border-radius: 12px;
+            background-color: #3b260c30;
+            width: 12px;
+            text-align: center;
+            position: relative;
+            &::after {
+                content: '';
+                width: 33vw;
+                background-color: #3b260c30;
+                height: 1px;
+                position: absolute;
+                left: 6px;
+                transform: translate(-50%, 6px);
+            }
+        }
+    }
+}
+</style>