generated from JX3BOX/jx3box-vue-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
966159b
commit 1656073
Showing
8 changed files
with
339 additions
and
0 deletions.
There are no files selected for viewing
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters