168 lines
4.4 KiB
Vue
168 lines
4.4 KiB
Vue
<template>
|
|
<ArticleDetail :id="id" :breadNav="breadNav" type="insight" :isRecommend="false" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onBeforeMount, onMounted, onUpdated } from 'vue';
|
|
import http from '@/io/http';
|
|
import { showToast } from 'vant';
|
|
import { useRoute } from 'vue-router';
|
|
import ArticleDetail from '@/components/ArticleDetail/index.vue';
|
|
|
|
const breadNav = ref([
|
|
{ path: '/', name: '首页' },
|
|
{ path: '/business', name: 'AI商情' },
|
|
{ path: '/business/insight', name: '行业洞察' },
|
|
]);
|
|
|
|
const route = useRoute();
|
|
const id = ref(route.params.id);
|
|
|
|
onBeforeMount(()=>{
|
|
getDetail();
|
|
});
|
|
|
|
|
|
const getDetail = () => {
|
|
http(`/api/article/${id.value}`, {}, 'get', {isLoading: false}).then(res => {
|
|
let tempNav = [...breadNav.value];
|
|
let cid = res.data.category_id;
|
|
res.data.category_path.forEach(v=>{
|
|
if(v.id == cid){
|
|
tempNav.push({path: `/business/insight/category/${cid}`, name: v.name});
|
|
}
|
|
});
|
|
breadNav.value = tempNav;
|
|
}).catch(err => {
|
|
// showToast(err.message);
|
|
});
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pageContainer{
|
|
color: #FFF;
|
|
padding: 25px;
|
|
background-color: #242527;
|
|
.breadNav{
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #999;
|
|
font-size: 22px;
|
|
span{
|
|
padding: 0 5px;
|
|
}
|
|
a{
|
|
color: #999;
|
|
&:hover{
|
|
color: #FFF;
|
|
}
|
|
}
|
|
}
|
|
.loadingBox{
|
|
width: 100%;
|
|
height: 400px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 24px;
|
|
}
|
|
.article{
|
|
padding: 20px 0;
|
|
.title{
|
|
font-size: 26px;
|
|
line-height: 30px;
|
|
font-weight: bold;
|
|
color: #FFF;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
}
|
|
.props{
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
color: #999;
|
|
font-size: 23px;
|
|
span{
|
|
display: inline-block;
|
|
margin: 10px;
|
|
}
|
|
}
|
|
.info{
|
|
line-height: 1.5;
|
|
font-size: 23px;
|
|
:deep(p){
|
|
padding: 10px 0;
|
|
}
|
|
:deep(strong){
|
|
font-weight: bold;
|
|
}
|
|
:deep(b){
|
|
font-weight: bold;
|
|
}
|
|
:deep(h1){
|
|
font-weight: bold;
|
|
}
|
|
:deep(img){
|
|
max-width: 100%;
|
|
display: block;
|
|
margin: 10px auto;
|
|
}
|
|
}
|
|
.recommend{
|
|
padding: 30px 0;
|
|
.blockTitle{
|
|
height: 46px;
|
|
line-height: 45px;
|
|
border-bottom: 1px solid #666;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
ul{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
li{
|
|
width: 50%;
|
|
padding-right: 30px;
|
|
display: flex;
|
|
margin-top: 30px;
|
|
.img{
|
|
width: 120px;
|
|
height: 168px;
|
|
overflow: hidden;
|
|
img{
|
|
width: 120px;
|
|
height: 168px;
|
|
}
|
|
}
|
|
.info{
|
|
flex: 1;
|
|
margin-left: 15px;
|
|
height: 168px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
h3{
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
padding-bottom: 10px;
|
|
}
|
|
p{
|
|
padding: 10px 0;
|
|
font-size: 12px;
|
|
line-height: 22px;
|
|
flex: 1;
|
|
}
|
|
span{
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |