<template>
|
<div class="home">
|
<h1>吉林省红色旅游数据库</h1>
|
<div class="search-div">
|
<div class="search-type">
|
<ul>
|
<li :class="searchType=='title'?'selected':''" @click="SwitchSearchType('title')">名称</li>
|
<li :class="searchType=='keywords'?'selected':''" @click="SwitchSearchType('keywords')">关键词</li>
|
<li :class="searchType=='description'?'selected':''" @click="SwitchSearchType('description')">简介</li>
|
</ul>
|
</div>
|
<div class="search-name">
|
<CustomSearch1 v-on:search="Search"></CustomSearch1>
|
</div>
|
</div>
|
<div class="navigation-div">
|
<div class="nav-div nav-memory" @click="NavigationGo(1)">
|
红色记忆
|
</div>
|
<div class="nav-div nav-personage" @click="NavigationGo(4)">
|
红色人物
|
</div>
|
<div class="nav-div nav-scenery" @click="NavigationGo(3)">
|
红色景区
|
</div>
|
<div class="nav-div nav-spirit" @click="NavigationGo(2)">
|
红色精神
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import CustomSearch1 from '../components/CustomSearch1'
|
|
export default {
|
name: "home",
|
components: {
|
CustomSearch1
|
},
|
data() {
|
return {
|
searchType: "title",
|
}
|
},
|
methods: {
|
Search: function (searchName) {
|
this.$router.push({name: "search-results", query: {searchType: this.searchType, searchName: searchName}});
|
},
|
SwitchSearchType: function (searchType) {
|
this.searchType = searchType;
|
},
|
NavigationGo(type) {
|
switch (type) {
|
case 1:
|
this.$router.push({name: "memory-list", query: {}});
|
break;
|
case 2:
|
this.$router.push({name: "spirit-list", query: {}});
|
break;
|
case 3:
|
this.$router.push({name: "scenery-list", query: {}});
|
break;
|
case 4:
|
this.$router.push({name: "personage-list", query: {}});
|
break;
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.home {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
width: 100%;
|
height: 99vh;
|
background: url("../assets/home_background@1x.png") no-repeat 100% 100%;
|
background-size: cover;
|
}
|
|
h1 {
|
width: 70%;
|
|
font-size: 4.5rem;
|
font-family: FZZhengHeiS-DB-GB;
|
font-weight: 400;
|
line-height: 6.87rem;
|
color: #FFFFFF;
|
}
|
|
.search-div {
|
width: 90%;
|
padding-bottom: 3.8vh;
|
}
|
|
.search-div ul {
|
text-align: left;
|
}
|
|
.search-div ul li {
|
cursor: pointer;
|
display: inline-block;
|
list-style-type: none;
|
padding-right: 5vw;
|
|
font-size: 1.75rem;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
|
.search-div ul li.selected {
|
font-size: 2rem;
|
font-family: Source Han Sans CN;
|
font-weight: 500;
|
color: #EFC587;
|
}
|
|
.navigation-div {
|
width: 90%;
|
}
|
|
.navigation-div .nav-div {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
width: 100%;
|
height: 10vh;
|
border-radius: 10px;
|
margin-bottom: 3vh;
|
cursor: pointer;
|
}
|
|
.navigation-div .nav-memory {
|
background: url("../assets/nav_memory@1x.png") no-repeat 100% 100%;
|
background-size: cover;
|
|
font-size: 3.37rem;
|
font-family: FZDaBiaoSong-B06S;
|
font-weight: 400;
|
line-height: 1.93rem;
|
color: #BC0000;
|
text-shadow: 0px 3px 6px rgba(255, 255, 255, 0.16);
|
opacity: 1;
|
}
|
|
.navigation-div .nav-personage {
|
background: url("../assets/nav_personage@1x.png") no-repeat 100% 100%;
|
background-size: cover;
|
|
font-size: 3.37rem;
|
font-family: FZDaBiaoSong-B06S;
|
font-weight: 400;
|
line-height: 1.93rem;
|
color: #BC0000;
|
opacity: 1;
|
}
|
|
.navigation-div .nav-scenery {
|
background: url("../assets/nav_scenery@1x.png") no-repeat 100% 100%;
|
background-size: cover;
|
|
font-size: 3.37rem;
|
font-family: FZDaBiaoSong-B06S;
|
font-weight: 400;
|
line-height: 1.93rem;
|
color: #FFE36C;
|
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
opacity: 1;
|
}
|
|
.navigation-div .nav-spirit {
|
background: url("../assets/nav_spirit@1x.png") no-repeat 100% 100%;
|
background-size: cover;
|
|
font-size: 3.37rem;
|
font-family: FZDaBiaoSong-B06S;
|
font-weight: 400;
|
line-height: 1.93rem;
|
color: #FFE36C;
|
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
opacity: 1;
|
}
|
</style>
|
