diff --git a/src/assets/css/treasure/Index.less b/src/assets/css/treasure/Index.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/assets/css/treasure/landscape.less b/src/assets/css/treasure/landscape.less
new file mode 100644
index 000000000..fd0284f26
--- /dev/null
+++ b/src/assets/css/treasure/landscape.less
@@ -0,0 +1,142 @@
+.m-body {
+    padding: 200px 0;
+    zoom: 0.8;
+}
+.m-content {
+    position: relative;
+    width: 1920px;
+    margin: 0 auto;
+    transform: translateY(-100%) rotate(90deg);
+    img {
+        display: block;
+    }
+    //
+    .reelCss {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%) translateX(-50%);
+        z-index: 4;
+    }
+    .afterCss {
+        content: " ";
+        width: 1800px;
+        background-color: white;
+        display: block;
+        position: absolute;
+        z-index: 4;
+        bottom: 0;
+        top: 0;
+    }
+    //
+    .m-left {
+        .reelCss();
+        left: calc(50% - 86px);
+        .u-left__img {
+            position: relative;
+            z-index: 5;
+        }
+        &::after {
+            .afterCss();
+            right: 0;
+        }
+        &.start {
+            animation: leftA 2s forwards;
+            animation-delay: 1s;
+            @keyframes leftA {
+                100% {
+                    left: 0;
+                }
+            }
+        }
+        &.start2 {
+            animation: leftA2 2s forwards;
+            animation-delay: 1s;
+            @keyframes leftA2 {
+                100% {
+                    left: 10%;
+                }
+            }
+        }
+    }
+    .m-right {
+        .reelCss();
+        right: calc(50% - 86px);
+        .u-right__img {
+            position: relative;
+            z-index: 5;
+        }
+        &::after {
+            .afterCss();
+            left: 0;
+        }
+        &.start {
+            animation: RightA 2s forwards;
+            animation-delay: 1s;
+            @keyframes RightA {
+                100% {
+                    right: 0;
+                }
+            }
+        }
+        &.start2 {
+            animation: RightA2 2s forwards;
+            animation-delay: 1s;
+            @keyframes RightA2 {
+                100% {
+                    right: 10%;
+                }
+            }
+        }
+    }
+    &.start {
+        animation: Start 1s forwards;
+        @keyframes Start {
+            0% {
+                transform: translateY(-100%) rotate(90deg);
+            }
+            85% {
+                transform: translateY(5%);
+            }
+            100% {
+                transform: translateY(0%);
+            }
+        }
+    }
+
+    .m-pt {
+        position: absolute;
+        left: 858px;
+        top: 93px;
+        display: flex;
+        flex-direction: row-reverse;
+        z-index: 3;
+        .m-pt__row {
+            flex-direction: column-reverse;
+            .m-pt__item {
+                position: relative;
+                width: 47px;
+                .m-pt__text {
+                    position: absolute;
+                    right: -11px;
+                    top: -5px;
+                    width: 20px;
+                    .u-pt__text {
+                        position: absolute;
+                        top: 4px;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        font-size: 10px;
+                        color: white;
+                        line-height: 1.3;
+                    }
+                }
+                &:not(:first-child) {
+                    margin-top: 19px;
+                }
+            }
+            &:not(:first-child) {
+                margin-right: 23px;
+            }
+        }
+    }
+}
diff --git a/src/pages/treasure.js b/src/pages/treasure.js
new file mode 100644
index 000000000..5aba369f5
--- /dev/null
+++ b/src/pages/treasure.js
@@ -0,0 +1,26 @@
+Vue.config.productionTip = false;
+
+// 第三方UI组件
+import Vue from "vue";
+import ElementUI from "element-ui";
+Vue.use(ElementUI);
+
+// 通用UI模块
+import JX3BOX_UI from "@jx3box/jx3box-common-ui";
+import "@jx3box/jx3box-common/css/element.css";
+import "@jx3box/jx3box-common/css/normalize.css";
+Vue.use(JX3BOX_UI);
+
+import reporter from "@jx3box/jx3box-common/js/reporter";
+reporter.install(Vue);
+
+// 数据与路由
+import router from "@/router/treasure";
+import store from "../store";
+
+import App from "@/views/treasure/Index.vue";
+new Vue({
+    router,
+    store,
+    render: (h) => h(App),
+}).$mount("#app");
diff --git a/src/router/treasure.js b/src/router/treasure.js
new file mode 100644
index 000000000..c1e687a6e
--- /dev/null
+++ b/src/router/treasure.js
@@ -0,0 +1,42 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const Index = () => import("@/views/treasure/Index.vue");
+const landscape = () => import("@/views/treasure/landscape.vue");
+const portrait = () => import("@/views/treasure/portrait.vue");
+
+const routes = [
+    {
+        name: "index",
+        path: "/",
+        component: Index,
+        redirect: {
+            name: "landscape",
+        },
+    },
+    {
+        name: "landscape",
+        path: "/landscape",
+        component: landscape,
+        meta: {
+            name: "横屏",
+        },
+    },
+    {
+        name: "portrait",
+        path: "/portrait",
+        component: portrait,
+        meta: {
+            name: "竖屏",
+        },
+    },
+];
+
+const router = new VueRouter({
+    mode: "history",
+    base: "/treasure",
+    routes,
+});
+
+export default router;
diff --git a/src/views/treasure/Index.vue b/src/views/treasure/Index.vue
new file mode 100644
index 000000000..74ab9aba9
--- /dev/null
+++ b/src/views/treasure/Index.vue
@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <Header></Header>
+        <Nav @statusChange="statusChange"></Nav>
+        <Main :class="navStatusClass" :withoutRight="true">
+            <div class="m-main">
+                <router-view></router-view>
+            </div>
+            <Footer></Footer>
+        </Main>
+    </div>
+</template>
+
+<script>
+import Nav from "@/components/Nav_v4.vue";
+export default {
+    name: "Index",
+    components: {
+        Nav,
+    },
+    data: () => ({
+        navStatusClass: "is-regular",
+    }),
+    methods: {
+        statusChange(navStatusClass) {
+            this.navStatusClass = navStatusClass;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "~@/assets/css/app.less";
+@import "~@/assets/css/treasure/Index.less";
+</style>
diff --git a/src/views/treasure/landscape.vue b/src/views/treasure/landscape.vue
new file mode 100644
index 000000000..5c90868ba
--- /dev/null
+++ b/src/views/treasure/landscape.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="m-body">
+        <div
+            class="m-content"
+            :class="{
+                start: addClass,
+            }"
+        >
+            <img class="u-content__img" src="../../assets/img/treasure/bg.png" alt="" />
+            <div class="m-left" :class="reelAddClass">
+                <img class="u-left__img" src="../../assets/img/treasure/left.png" alt="" />
+            </div>
+            <div class="m-right" :class="reelAddClass">
+                <img class="u-right__img" src="../../assets/img/treasure/right.png" alt="" />
+            </div>
+            <!-- 普通奇遇 -->
+            <div class="m-pt">
+                <div class="m-pt__row">
+                    <div class="m-pt__item" v-for="(item, index) in Array(3)" :key="index">
+                        <img class="u-pt__img" src="../../assets/img/treasure/pt/brm.png" alt="" />
+                        <div class="m-pt__text">
+                            <img class="u-pt__bg" src="../../assets/img/treasure/pt/text_bg.png" alt="" />
+                            <span class="u-pt__text">白日梦梦</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="m-pt__row">
+                    <div class="m-pt__item" v-for="(item, index) in Array(3)" :key="index">
+                        <img class="u-pt__img" src="../../assets/img/treasure/pt/brm.png" alt="" />
+                        <div class="m-pt__text">
+                            <img class="u-pt__bg" src="../../assets/img/treasure/pt/text_bg.png" alt="" />
+                            <span class="u-pt__text">白日梦</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="m-pt__row">
+                    <div class="m-pt__item" v-for="(item, index) in Array(1)" :key="index">
+                        <img class="u-pt__img" src="../../assets/img/treasure/pt/brm.png" alt="" />
+                        <div class="m-pt__text">
+                            <img class="u-pt__bg" src="../../assets/img/treasure/pt/text_bg.png" alt="" />
+                            <span class="u-pt__text">白日梦</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "landscape",
+    data: () => ({
+        mainAddClass: false,
+        reelAddClass: false,
+    }),
+    mounted() {
+        setTimeout(() => {
+            this.addClass = true;
+            this.reelAddClass = "start";
+        }, 1000);
+    },
+    methods: {},
+};
+</script>
+
+<style lang="less">
+@import "~@/assets/css/app.less";
+@import "~@/assets/css/treasure/landscape.less";
+</style>
diff --git a/src/views/treasure/portrait.vue b/src/views/treasure/portrait.vue
new file mode 100644
index 000000000..7b2ea6485
--- /dev/null
+++ b/src/views/treasure/portrait.vue
@@ -0,0 +1,18 @@
+<template>
+    <div id="app">
+        222
+    </div>
+</template>
+
+<script>
+export default {
+    name: "treasure",
+    data: () => ({}),
+    methods: {},
+};
+</script>
+
+<style lang="less">
+@import "~@/assets/css/app.less";
+@import "~@/assets/css/treasure/Index.less";
+</style>
diff --git a/vue.config.js b/vue.config.js
index eebf10b19..4149ed883 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -78,6 +78,12 @@ module.exports = {
             template: "public/index.html",
             filename: "exam/index.html",
         },
+        treasure: {
+            title: "奇遇完成度 - JX3BOX",
+            entry: "src/pages/treasure.js",
+            template: "public/index.html",
+            filename: "treasure/index.html",
+        },
     },
 
     outputDir: process.env["BUILD_MODE"] == "preview" ? path.resolve(__dirname, pkg.name) : 'dist', // 指定构建输出的目录