<template>
|
<div class="datalist">
|
<div class="data-title">
|
<div @click="ToHome">吉林省红色旅游数据库</div>
|
<div @click="ToHome">红色景点库</div>
|
</div>
|
<div class="data-content">
|
<transition name="fade-transform" mode="out-in">
|
<router-view :key="key"/>
|
</transition>
|
</div>
|
<mt-tabbar v-model="dataType" :fixed="true">
|
<mt-tab-item id="1">红色记忆</mt-tab-item>
|
<mt-tab-item id="2">红色精神</mt-tab-item>
|
<mt-tab-item id="3">红色景区</mt-tab-item>
|
<mt-tab-item id="4">红色人物</mt-tab-item>
|
</mt-tabbar>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "listIndex",
|
data() {
|
return {
|
dataType: ""
|
}
|
},
|
methods: {
|
ToHome: function () {
|
this.$router.push({name: "home"});
|
}
|
},
|
watch: {
|
dataType: function () {
|
switch (this.dataType) {
|
case "1":
|
this.$router.push({name: "memory-list"});
|
break;
|
case "2":
|
this.$router.push({name: "spirit-list"});
|
break;
|
case "3":
|
this.$router.push({name: "scenery-list"});
|
break;
|
case "4":
|
this.$router.push({name: "personage-list"});
|
break;
|
}
|
},
|
},
|
computed: {
|
key() {
|
return this.$route.path
|
}
|
},
|
created() {
|
if (this.dataType == "") {
|
switch (this.$route.name) {
|
case "memory-list":
|
this.dataType = "1";
|
break;
|
case "spirit-list":
|
this.dataType = "2"
|
break;
|
case "scenery-list":
|
this.dataType = "3";
|
break;
|
case "personage-list":
|
this.dataType = "4";
|
break;
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.datalist {
|
width: 100%;
|
height: 100vh;
|
}
|
|
.data-title {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
width: 100%;
|
height: 16vh;
|
background: url("../../assets/datalist/datalist@1x.png") no-repeat 100% 100%;
|
background-size: cover;
|
}
|
|
.data-title > div {
|
width: 100%;
|
text-align: left;
|
font-size: 2.87rem;
|
font-family: FZZhengHeiS-DB-GB;
|
font-weight: 400;
|
line-height: 4.37rem;
|
color: #FFFFFF;
|
opacity: 1;
|
padding-left: 2rem;
|
}
|
|
.data-content {
|
width: 100%;
|
height: 75vh;
|
background: #FFFFFF;
|
border-radius: 10px 10px 0px 0px;
|
|
position: relative;
|
z-index: 5;
|
}
|
|
.data-content .list-root{
|
height: 100%;
|
width: 100%;
|
}
|
|
.mint-tabbar {
|
height: 10vh;
|
background: white;
|
z-index: 9;
|
}
|
|
.mint-tabbar /deep/ .mint-tab-item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.mint-tabbar /deep/ .mint-tab-item-label {
|
width: 7.75rem;
|
height: 100%;
|
border-top: 1px solid white;
|
|
font-size: 1.75rem;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
line-height: 3.5rem;
|
color: #767676;
|
opacity: 1;
|
}
|
|
.mint-tabbar /deep/ .is-selected {
|
background-color: white;
|
}
|
|
.mint-tabbar /deep/ .is-selected .mint-tab-item-label {
|
border-top: 1px solid #BC0000;
|
|
font-size: 1.75rem;
|
font-family: Source Han Sans CN;
|
font-weight: bold;
|
line-height: 3.5rem;
|
color: #BC0000;
|
opacity: 1;
|
}
|
</style>
|
