Skip to content

html / MeteorologicalBureau

Go to a project
Commit 4dc1a34b by hanjixin
Options

控制端页面结构搭建

parent 8cad5f7b
Showing with 469 additions and 12 deletions
ctr/public/index.html
......@@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="./common/swiper.animate1.0.2.min.js"></script>
<script src="https://cdn.bootcss.com/animejs/3.1.0/anime.min.js "></script>
<link rel="stylesheet" href="./common/animate.css">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>气象局</title>
......
ctr/src/main.js
......@@ -4,7 +4,7 @@ import store from './store'
import router from './router'
import '@/assets/app.scss';
// import '@/assets/animate.scss';
import 'lib-flexible'
// import 'lib-flexible'
// import VConsole from 'vconsole'
// new VConsole();
// console.log('Hello world');
......
ctr/src/router/index.js
......@@ -17,6 +17,42 @@ const router = new Router({
name: 'about',
component: () =>
import(/* webpackChunkName: "about" */ '@/views/About.vue')
},
{
path: '/start',
name: 'start',
component: () =>
import(/* webpackChunkName: "start" */ '@/views/start.vue')
},
{
path: '/province',
name: 'province',
component: () =>
import(/* webpackChunkName: "province" */ '@/views/province/index.vue')
},
{
path: '/ue4',
name: 'ue4',
component: () =>
import(/* webpackChunkName: "ue4" */ '@/views/ue4/index.vue')
},
{
path: '/eventMonitor',
name: 'eventMonitor',
component: () =>
import(/* webpackChunkName: "eventMonitor" */ '@/views/eventMonitor/index.vue')
},
{
path: '/publishingSystem',
name: 'publishingSystem',
component: () =>
import(/* webpackChunkName: "publishingSystem" */ '@/views/publishingSystem/index.vue')
},
{
path: '/warmingCenter',
name: 'warmingCenter',
component: () =>
import(/* webpackChunkName: "warmingCenter" */ '@/views/warmingCenter/index.vue')
}
]
});
......
ctr/src/views/About.vue
<template>
<div>
about
<div class="content animated zoomIn">
<span class="">国家预警信息发布中心</span>
</div>
</template>
<script>
export default {
}
export default {};
</script>
<style>
<style lang="scss" scoped>
.content {
height: 100vh;
line-height: 80vh;
font-size: 60px;
color: white;
font-weight: bold;
text-align: center;
background-color: #58a;
background-image: repeating-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.1),
hsla(0, 0%, 100%, 0.1) 15px,
transparent 15px,
transparent 30px
);
}
</style>
\ No newline at end of file
ctr/src/views/Home.vue
<template>
<div>
home
<div class="content animated zoomIn" @click="go">
<span class="">国家预警信息发布中心</span>
</div>
</template>
<script>
export default {
}
name: 'Home',
methods: {
go() {
this.$router.push('/start')
}
},
};
</script>
<style>
<style lang="scss" scoped>
.content {
height: 100vh;
line-height: 80vh;
font-size: 60px;
color: white;
font-weight: bold;
text-align: center;
background-color: #58a;
background-image: repeating-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.1),
hsla(0, 0%, 100%, 0.1) 15px,
transparent 15px,
transparent 30px
);
}
</style>
\ No newline at end of file
ctr/src/views/eventMonitor/index.vue 0 → 100644
<template>
<div class="content animated zoomIn" @click="go">
<span class="">预警时间监控</span>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
go() {
this.$router.push('/start')
}
},
};
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
line-height: 80vh;
font-size: 60px;
color: white;
font-weight: bold;
text-align: center;
background-color: #58a;
background-image: repeating-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.1),
hsla(0, 0%, 100%, 0.1) 15px,
transparent 15px,
transparent 30px
);
}
</style>
\ No newline at end of file
ctr/src/views/province/index.vue 0 → 100644
<template>
<div class="content animated zoomIn" @click="go">
<span class="">省级监控</span>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
go() {
this.$router.push('/start')
}
},
};
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
line-height: 80vh;
font-size: 60px;
color: white;
font-weight: bold;
text-align: center;
background-color: #58a;
background-image: repeating-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.1),
hsla(0, 0%, 100%, 0.1) 15px,
transparent 15px,
transparent 30px
);
}
</style>
\ No newline at end of file
ctr/src/views/publishingSystem/index.vue 0 → 100644
<template>
<div class="content animated fadeIn">
<div class="qiu one" @click="goMain">
预警发布系统简介
</div>
<div class="qiu one" @click="goUe4">
建设背景，发展历程，建设成效
</div>
<div class="qiu one" @click="goUe4">
报警信息发布全流程
</div>
<div class="qiu one" @click="goUe4">
预警信息服务效益
</div>
<div class="qiu one" @click="goUe4">
预警系统发展历程
</div>
</div>
</template>
<script>
export default {
name: "Home",
methods: {
goMain() {
this.$router.push("/province");
},
goUe4() {
this.$router.push("/ue4");
},
goWarmingCenter() {
this.$router.push("/warmingCenter");
},
goDes() {
this.$router.push("/publishingSystem");
},
goEventMonitor() {
this.$router.push("/eventMonitor");
}
},
mounted() {
var anime = window.anime
anime({
targets: ".content .qiu",
translateY: [470,0],
delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
});
}
};
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
padding: 0;
margin-top: 0 !important;
padding-top: 30px;
// line-height: 80vh;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
background-color: #58a;
background-image: repeating-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.1),
hsla(0, 0%, 100%, 0.1) 15px,
transparent 15px,
transparent 30px
);
.qiu {
width: 300px;
padding: 20px;
margin: 50px auto;
border: 2px solid greenyellow;
}
}
</style>
\ No newline at end of file
ctr/src/views/start.vue 0 → 100644
<template>
<div class="content animated fadeIn">
<div class="qiu one" @click="goMain">
进入主系统
</div>
<div class="qiu one" @click="goUe4">
气象灾害UE4演示
</div>
<div class="qiu one" @click="goWarmingCenter">
预警中心介绍
</div>
<div class="qiu one" @click="goDes">
预警发布系统介绍
</div>
<div class="qiu one" @click="goEventMonitor">
预警事件监控
</div>
</div>
</template>
<script>
export default {
name: "Home",
methods: {
goMain() {
this.$router.push("/province");
},
goUe4() {
this.$router.push("/ue4");
},
goWarmingCenter() {
this.$router.push("/warmingCenter");
},
goDes() {
this.$router.push("/publishingSystem");
},
goEventMonitor() {
this.$router.push("/eventMonitor");
}
},
mounted() {
var anime = window.anime
anime({
targets: ".content .qiu",
translateY: [470,0],
delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
});
}
};
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
padding: 0;
margin-top: 0 !important;
padding-top: 30px;
// line-height: 80vh;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
background-color: #58a;
background-image: repeating-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.1),
hsla(0, 0%, 100%, 0.1) 15px,
transparent 15px,
transparent 30px
);
.qiu {
width: 300px;
padding: 20px;
margin: 50px auto;
border: 2px solid greenyellow;
}
}
</style>
\ No newline at end of file
ctr/src/views/ue4/index.vue 0 → 100644
<template>
<div class="content animated fadeIn">
<div class="qiu one" @click="goMain">
滨海小城灾害演示
</div>
<div class="qiu one" @click="goUe4">
地图沙盘表演预警信息流程
</div>
</div>
</template>
<script>
export default {
name: "Home",
methods: {
goMain() {
this.$router.push("/province");
},
goUe4() {
this.$router.push("/ue4");
},
goWarmingCenter() {
this.$router.push("/warmingCenter");
},
goDes() {
this.$router.push("/publishingSystem");
},
goEventMonitor() {
this.$router.push("/eventMonitor");
}
},
mounted() {
var anime = window.anime
anime({
targets: ".content .qiu",
translateY: [470,0],
delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
});
}
};
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
padding: 0;
margin-top: 0 !important;
padding-top: 30px;
// line-height: 80vh;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
background-color: #58a;
background-image: repeating-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.1),
hsla(0, 0%, 100%, 0.1) 15px,
transparent 15px,
transparent 30px
);
.qiu {
width: 300px;
padding: 20px;
margin: 50px auto;
border: 2px solid greenyellow;
}
}
</style>
\ No newline at end of file
ctr/src/views/warmingCenter/index.vue 0 → 100644
<template>
<div class="content animated fadeIn">
<div class="qiu one" @click="goMain">
中心简介
</div>
<div class="qiu one" @click="goUe4">
信息服务简介
</div>
<div class="qiu one" @click="goUe4">
预警中心发展历程
</div>
<div class="qiu one" @click="goUe4">
宣传片视频集合
</div>
</div>
</template>
<script>
export default {
name: "Home",
methods: {
goMain() {
this.$router.push("/province");
},
goUe4() {
this.$router.push("/ue4");
},
goWarmingCenter() {
this.$router.push("/warmingCenter");
},
goDes() {
this.$router.push("/publishingSystem");
},
goEventMonitor() {
this.$router.push("/eventMonitor");
}
},
mounted() {
var anime = window.anime
anime({
targets: ".content .qiu",
translateY: [470,0],
delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
});
}
};
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
padding: 0;
margin-top: 0 !important;
padding-top: 30px;
// line-height: 80vh;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
background-color: #58a;
background-image: repeating-linear-gradient(
45deg,
hsla(0, 0%, 100%, 0.1),
hsla(0, 0%, 100%, 0.1) 15px,
transparent 15px,
transparent 30px
);
.qiu {
width: 300px;
padding: 20px;
margin: 50px auto;
border: 2px solid greenyellow;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment