129 lines
3.2 KiB
Vue
129 lines
3.2 KiB
Vue
<template>
|
|
<div class="pageContainer">
|
|
<div class="banner" :style="`background-image: url(${banner.picture})`">
|
|
<div class="desc">
|
|
<h2>{{ banner.name }}</h2>
|
|
<p>{{ banner.description }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="mainBox">
|
|
<ul class="menu">
|
|
<li :class="{active: cid == item.id}" @click="jump(item.id)" v-for="item in categories">{{item.name}}</li>
|
|
</ul>
|
|
<CardList :key="cid" :cid="cid" type="business"></CardList>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onBeforeMount, onMounted, onUpdated, watch } from 'vue';
|
|
import http from '@/io/http';
|
|
import { showToast } from 'vant';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import CardList from '../components/CategoryCardList.vue';
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const cid = ref(route.params.cid);
|
|
const banner = ref({});
|
|
const categories = ref([]);
|
|
|
|
onBeforeMount(() => {
|
|
getBanner();
|
|
getCategories();
|
|
});
|
|
|
|
onUpdated(()=>{
|
|
cid.value = route.params.cid;
|
|
});
|
|
|
|
watch(cid, (newCid, oldCid)=>{
|
|
if(newCid !== oldCid){
|
|
getBanner();
|
|
}
|
|
});
|
|
|
|
const getBanner = ()=>{
|
|
let params = {key: 'pc_business'};
|
|
http('/api/banner', params, 'get').then(res => {
|
|
banner.value = Array.isArray(res.data) ? res.data[0] : {};
|
|
}).catch(err => {
|
|
showToast(err.message);
|
|
});
|
|
};
|
|
|
|
const getCategories = ()=>{
|
|
let params = { type_key: 'business' };
|
|
http('/api/keywords', params, 'get').then(res => {
|
|
categories.value = res.data || [];
|
|
}).catch(err => {
|
|
showToast(err.message);
|
|
});
|
|
};
|
|
|
|
const jump = (cid)=>{
|
|
router.push(`/business/insight/category/${cid}`);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pageContainer{
|
|
width: 100%;
|
|
color: #FFF;
|
|
.banner{
|
|
width: 100%;
|
|
height: 216px;
|
|
background-color: rgba($color: #FFF, $alpha: 0.5);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
.desc{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
h2{
|
|
font-size: 27px;
|
|
}
|
|
p{
|
|
width: 460px;
|
|
font-size: 23px;
|
|
line-height: 30px;
|
|
padding: 10px 0;
|
|
}
|
|
}
|
|
}
|
|
.mainBox{
|
|
width: 100%;
|
|
.menu{
|
|
width: 100%;
|
|
height: 90px;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
display: flex;
|
|
padding: 20px;
|
|
flex-wrap: nowrap;
|
|
position: relative;
|
|
li{
|
|
height: 48px;
|
|
padding: 0 20px;
|
|
border-radius: 3px;
|
|
color: #999;
|
|
line-height: 48px;
|
|
margin-right: 20px;
|
|
font-size: 28px;
|
|
white-space: nowrap;
|
|
&:active,
|
|
&.active{
|
|
background: #3662FE;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |