Skip to content

html / MeteorologicalBureau

Go to a project
Commit 17788ed7 by fengfan
Options

ui

parent f54df34a
Showing with 51 additions and 226 deletions
ipadCtr/src/App.vue
<template> <template>
<div id="app"> <div id="app">
<Header/> <Header />
<Nav/> <Nav />
<router-view/> <transition name="fade">
<router-view />
</transition>
</div> </div>
</template> </template>
<script> <script>
import Header from "./components/head" import Header from "./components/head";
import Nav from "./components/nav" import Nav from "./components/nav";
export default { export default {
name: 'App', name: "App",
components:{Header,Nav} components: { Header, Nav }
} };
</script> </script>
<style> <style>
#app { #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
...@@ -30,3 +32,13 @@ export default { ...@@ -30,3 +32,13 @@ export default {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>
ipadCtr/src/pages/belt_road.vue
<template> <template>
<div class="page"> <div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn"> <div class='null'></div>
<div class="content"> <updown @up=up @down=down class='btns' />
<div class=btn>去h5</div>
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div> </div>
</template> </template>
<script> <script>
import { send } from "@/service/ctrapi"; import { send } from "@/service/ctrapi";
import contentBox from "../components/contentBox"; import updown from "../components/updown";
import pageTitle from "../components/pageTitle"; import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default { export default {
components: { contentBox, pageTitle, vuescroll }, components: { updown, pageTitle },
data() { data() {
return { return {
btnlist: [],
titledata: ["24小时", "近一周", "近一月", "近一年"],
msgPathCfg:{ msgPathCfg:{
root:'/预警监控',
list1:'/省级',
subtitle:'/时间范围',
},
titleactive: 0,
activearea: {},
subtitle: {},
btnbackshow: false,
ops: {
bar: {
background: "#41c9ff",
keepShow: true
}, },
rail: {
background: "#3e4a59",
opacity: 0.5
}
}
}; };
}, },
mounted() { mounted() {
this.showP();
}, },
methods: { methods: {
backfn() { titleclickfn(i) {
send(`${this.msgPathCfg.root}`, []); this.titleactive = i
this.showP(); if(i==0){
send(`/预警系统/信息流程`,[])
}else{
send(`/预警系统/系统流程`,[])
}
}, },
showP() { up() {
this.$axios // send(`/预警系统/信息流程/Up`,[])
.get("http://123.56.149.208:8091/external/get/city/all")
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = false;
this.titleactive = 0
this.activearea = this.btnlist[0];
this.subtitle = {};
});
}, },
showC(item) { down() {
if (this.btnbackshow) { // send(`/预警系统/信息流程/Down`,[])
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
[]
);
} else if (item.name === "全国") {
this.activearea = item;
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
this.$axios
.get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = true;
this.subtitle = item;
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
});
}
}, },
titleclickfn(i) { h5(){
this.titleactive = i;
if (this.btnbackshow && this.activearea == this.subtitle) {
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
} else if (this.activearea.name === "全国") {
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
// send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
}
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
.null{
height: 2.5rem;
}
.page { .page {
width: 18.4rem; width: 18.4rem;
height: 13.5rem; height: 13.5rem;
...@@ -127,20 +56,14 @@ export default { ...@@ -127,20 +56,14 @@ export default {
background-size: cover; background-size: cover;
margin-top: 1.5rem; margin-top: 1.5rem;
margin-left: 2.2rem; margin-left: 2.2rem;
position: relative;
} }
.content { .content {
padding-top: 1rem; padding-top: 1rem;
padding-left: 1rem; padding-left: 1rem;
text-align: left; text-align: left;
} }
#scrollbox { .btn{
width: 15.5rem;
height: 9rem;
margin-left: 1rem;
margin-top: 0.5rem;
}
.btn {
float: left;
white-space: nowrap; white-space: nowrap;
font-size: 0.3rem; font-size: 0.3rem;
color: #fff; color: #fff;
...@@ -152,32 +75,10 @@ export default { ...@@ -152,32 +75,10 @@ export default {
height: 0.81rem; height: 0.81rem;
background: url(../assets/img/btn-bg.png) no-repeat; background: url(../assets/img/btn-bg.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative;
}
.subtitle {
margin: 0.5rem 0 0.5rem 1rem;
color: #fff;
font-size: 0.4rem;
text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
}
.activearea {
font-size: 0.35rem;
}
.activearea::after {
content: "";
position: absolute; position: absolute;
left: 0; left: 13rem;
right: 0; top: 5.8rem;
top: 0;
bottom: -100%;
background: url(../assets/img/btn-light.png) no-repeat;
background-size: 100% 94%;
}
>>> div.title{
background:none;
transform: translateY(-0.2rem);
} }
</style> </style>
ipadCtr/src/pages/bigdata.vue
<template> <template>
<div class="page"> <div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div> </div>
</template> </template>
......
ipadCtr/src/pages/disasters.vue
<template> <template>
<div class="page"> <div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div> </div>
</template> </template>
......
ipadCtr/src/pages/scence.vue
<template> <template>
<div class="page"> <div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div> </div>
</template> </template>
......
ipadCtr/src/pages/yangtzeRiver.vue
<template> <template>
<div class="page"> <div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div> </div>
</template> </template>
......
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