国别地区
fuxiaochun
parent
a3474242a4
commit
53227c80cd
|
|
@ -126,6 +126,24 @@ const router = createRouter({
|
|||
},
|
||||
component: () => import("@/views/business/legal/policyDetail.vue"),
|
||||
},
|
||||
{
|
||||
path: 'business/legal/country',
|
||||
name: 'country',
|
||||
meta: {
|
||||
title: 'AI商情-法律法规-国别地区指南',
|
||||
group: 'business'
|
||||
},
|
||||
component: () => import("@/views/business/legal/country.vue"),
|
||||
},
|
||||
{
|
||||
path: 'business/legal/country/detail/:id',
|
||||
name: 'countryDetail',
|
||||
meta: {
|
||||
title: 'AI商情-法律法规-国别地区指南',
|
||||
group: 'business'
|
||||
},
|
||||
component: () => import("@/views/business/legal/countryInfo.vue"),
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<div class="pageContainer">
|
||||
<div class="areaBox">
|
||||
<ul>
|
||||
<li :class="{ active: area == 'Asia' }" @click="getCountryList('Asia')">亚洲</li>
|
||||
<li :class="{ active: area == 'Europe' }" @click="getCountryList('Europe')">欧洲</li>
|
||||
<li :class="{ active: area == 'North_America' }" @click="getCountryList('North_America')">北美洲</li>
|
||||
<li :class="{ active: area == 'South_America' }" @click="getCountryList('South_America')">南美洲</li>
|
||||
<li :class="{ active: area == 'Oceania' }" @click="getCountryList('Oceania')">大洋洲</li>
|
||||
<li :class="{ active: area == 'Africa' }" @click="getCountryList('Africa')">非洲</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="countryList">
|
||||
<div class="tips" v-if="!area ">请先选择上面的地区大洲</div>
|
||||
<ul v-if="countries.length > 0">
|
||||
<li :key="item.id" v-for="item in countries" @click="goDetail(item.id)">{{ item.name }}</li>
|
||||
</ul>
|
||||
<div class="placeholder" v-if="placeholder">{{ placeholder }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import http from '@/io/http';
|
||||
import { showToast } from 'vant';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
const area = ref();
|
||||
const countries = ref([]);
|
||||
const placeholder = ref();
|
||||
|
||||
const getCountryList = (key) => {
|
||||
area.value = key;
|
||||
let params = { category_key: key };
|
||||
placeholder.value = '数据加载中...';
|
||||
http(`/api/country`, params, 'get').then(res => {
|
||||
countries.value = res.data || [];
|
||||
placeholder.value = countries.value.length ? '' : '暂无数据';
|
||||
}).catch(err => {
|
||||
showToast(err.message);
|
||||
placeholder.value = '国家地区数据加载失败'
|
||||
});
|
||||
};
|
||||
|
||||
const goDetail = (id) => {
|
||||
router.push(`/business/legal/country/detail/${id}`);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pageContainer{
|
||||
padding: 60px;
|
||||
height: 100%;
|
||||
color: #FFF;
|
||||
|
||||
.areaBox{
|
||||
flex: 1;
|
||||
ul{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
li{
|
||||
width: 48%;
|
||||
padding: 20px;
|
||||
font-size: 26px;
|
||||
line-height: 30px;
|
||||
background: #414548;
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
&:active,
|
||||
&.active{
|
||||
background: #3662FE;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.countryList{
|
||||
flex: 1;
|
||||
height: 70%;
|
||||
border: 2px solid #CCC;
|
||||
border-radius: 4px;
|
||||
margin-top: 50px;
|
||||
overflow-y: auto;
|
||||
.tips{
|
||||
font-size: 26px;
|
||||
padding: 20px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
li{
|
||||
padding: 20px;
|
||||
font-size: 26px;
|
||||
line-height: 30px;
|
||||
border-bottom: 1px dashed #414548;
|
||||
&:active{
|
||||
background: #3662FE;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.placeholder{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 23px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
<template>
|
||||
<div class="pageContainer">
|
||||
<div class="mainBox">
|
||||
<div class="breadNav">
|
||||
<router-link to="/home">首页</router-link><span>></span>
|
||||
<router-link to="/insights">AI商情</router-link><span>></span>
|
||||
<router-link to="/insights/legal/index">法律法规</router-link><span>></span>
|
||||
<router-link to="/insights/legal/country">国别地区指南</router-link><span>></span>
|
||||
<span>详情</span>
|
||||
</div>
|
||||
<template v-if="detail">
|
||||
<div class="countryDesc">
|
||||
<div class="title">{{ detail.full_name }}</div>
|
||||
<div class="flag"><img :src="detail.flag" alt=""></div>
|
||||
<div class="desc">
|
||||
<p>{{detail.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailContent">
|
||||
<dl class="menu">
|
||||
<dt>目录</dt>
|
||||
<dd>
|
||||
<span :class="{active: curMenu == item.title}" :key="index" v-for="item,index in detail.content" @click="chooseMenu(item)">{{item.title}}</span>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl class="section">
|
||||
<dt>内容</dt>
|
||||
<dd>
|
||||
<span :class="{active: curSection == item.title}" :key="index" v-for="item,index in curMenuData" @click="chooseSection(item)">{{item.title}}</span>
|
||||
</dd>
|
||||
</dl>
|
||||
<div class="info">
|
||||
<template :key="index" v-for="item, index in curSectionData">
|
||||
<img v-if="item.type == 'image'" :src="item.value">
|
||||
<p v-if="item.type == 'text'">{{item.value}}</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="loadingBox" v-else>数据加载中...</div>
|
||||
</div>
|
||||
<!-- <AiAssistant></AiAssistant> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onBeforeMount, onMounted } from 'vue';
|
||||
import http from '@/io/http';
|
||||
import { showToast } from 'vant';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { DateFormat } from '@/utils/format.js';
|
||||
// import AiAssistant from '@/views/chat/components/ai-assistant.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const id = ref(route.params.id);
|
||||
const detail = ref();
|
||||
const curMenu = ref(''); // 当前选中的目录
|
||||
const curMenuData = ref(); // 当前选中的目录数据
|
||||
const curSection = ref(); // 当前选中的内容
|
||||
const curSectionData = ref(); // 当前选中的内容数据
|
||||
|
||||
onMounted(() => {
|
||||
getDetail();
|
||||
});
|
||||
|
||||
const getDetail = () => {
|
||||
http(`/api/country/${id.value}`, {}, 'get').then(res => {
|
||||
detail.value = res.data;
|
||||
curMenu.value = res.data.content[0].title;
|
||||
curMenuData.value = res.data.content[0].list;
|
||||
curSection.value = curMenuData.value[0].title;
|
||||
curSectionData.value = curMenuData.value[0].list;
|
||||
}).catch(err => {
|
||||
showToast(err.message);
|
||||
});
|
||||
};
|
||||
|
||||
const chooseMenu = (item)=>{
|
||||
curMenu.value = item.title;
|
||||
curMenuData.value = item.list;
|
||||
curSection.value = item.list[0].title;
|
||||
curSectionData.value = item.list[0].list;
|
||||
};
|
||||
|
||||
const chooseSection = (item)=>{
|
||||
curSection.value = item.title;
|
||||
curSectionData.value = item.list;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pageContainer {
|
||||
color: #FFF;
|
||||
display: flex;
|
||||
|
||||
.mainBox {
|
||||
flex: 1;
|
||||
background: #242527;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.countryDesc{
|
||||
flex: 1;
|
||||
padding: 50px 0;
|
||||
.title{
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.flag{
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: #424242;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
.desc{
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
p{
|
||||
font-size: 23px;
|
||||
line-height: 30px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailContent {
|
||||
padding: 20px 0;
|
||||
|
||||
.menu,
|
||||
.section{
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
dt{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
dd{
|
||||
flex: 1;
|
||||
line-height: 0;
|
||||
span{
|
||||
display: inline-block;
|
||||
padding: 0 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 15px;
|
||||
background: #414548;
|
||||
border-radius: 4px;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&.active{
|
||||
background-color: #3662FE;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.section dd span{
|
||||
background: none;
|
||||
border: 1px solid #999;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.info {
|
||||
line-height: 1.5;
|
||||
min-height: 400px;
|
||||
font-size: 24px;
|
||||
: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue