Skip to content

Commit

Permalink
feat: treasure(未完成)
Browse files Browse the repository at this point in the history
  • Loading branch information
TiAmo-code committed May 7, 2024
1 parent 966159b commit 1656073
Show file tree
Hide file tree
Showing 8 changed files with 339 additions and 0 deletions.
Empty file.
142 changes: 142 additions & 0 deletions src/assets/css/treasure/landscape.less
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
26 changes: 26 additions & 0 deletions src/pages/treasure.js
Original file line number Diff line number Diff line change
@@ -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");
42 changes: 42 additions & 0 deletions src/router/treasure.js
Original file line number Diff line number Diff line change
@@ -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;
35 changes: 35 additions & 0 deletions src/views/treasure/Index.vue
Original file line number Diff line number Diff line change
@@ -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>
70 changes: 70 additions & 0 deletions src/views/treasure/landscape.vue
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 18 additions & 0 deletions src/views/treasure/portrait.vue
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 6 additions & 0 deletions vue.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', // 指定构建输出的目录
Expand Down

0 comments on commit 1656073

Please sign in to comment.