133 lines
3.3 KiB
Vue
133 lines
3.3 KiB
Vue
<template>
|
|
<div class="pageContainer">
|
|
<ul class="categoryBox" v-if="categories">
|
|
<li :key="item.id" v-for="item in categories" @click="goListPage(item.id)">
|
|
<img :src="item.image" :alt="item.name">
|
|
<div class="title">{{ item.name }}</div>
|
|
</li>
|
|
</ul>
|
|
<div class="loadingBox" v-else>行业数据加载中...</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 12行业洞察聚合页
|
|
import { ref, onBeforeMount, onMounted } from 'vue';
|
|
import http from '@/io/http';
|
|
import { showToast } from 'vant';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const router = useRouter();
|
|
const categories = ref();
|
|
|
|
onBeforeMount(() => {
|
|
let params = { type_key: 'business' };
|
|
http('/api/keywords', params, 'get').then(res => {
|
|
categories.value = res.data || [];
|
|
}).catch(err => {
|
|
showToast(err.message);
|
|
});
|
|
});
|
|
|
|
|
|
const goListPage = (id) => {
|
|
router.push('/business/insight/category/' + id);
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pageContainer {
|
|
color: #FFF;
|
|
padding: 90px 65px;
|
|
min-height: 100%;
|
|
|
|
.loadingBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.categoryBox {
|
|
width: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 200px;
|
|
height: 110px;
|
|
background: url('@/assets/images/12jobs_cube1.png') no-repeat center;
|
|
background-size: contain;
|
|
position: absolute;
|
|
top: -55px;
|
|
left: -45px;
|
|
z-index: 0;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: 200px;
|
|
height: 143px;
|
|
background: url('@/assets/images/12jobs_cube2.png') no-repeat center;
|
|
background-size: contain;
|
|
position: absolute;
|
|
bottom: -70px;
|
|
right: -50px;
|
|
z-index: 0;
|
|
}
|
|
|
|
li {
|
|
width: 300px;
|
|
height: 160px;
|
|
border: 1px solid #666;
|
|
margin-top: 15px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
background: #000;
|
|
z-index: 5;
|
|
|
|
&:hover {
|
|
border-color: #FFF;
|
|
}
|
|
|
|
img {
|
|
width: 298px;
|
|
height: 158px;
|
|
display: block;
|
|
opacity: 0.7;
|
|
font-size: 23px;
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
height: 30px;
|
|
font-size: 28px;
|
|
line-height: 30px;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
bottom: 25px;
|
|
padding-left: 30px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 11px;
|
|
top: 5px;
|
|
width: 5px;
|
|
height: 24px;
|
|
background: #3662FE;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |