Merge branch 'master' of https://gitea.hmily.club/haitu/aigc-h5
commit
c612febd7c
|
|
@ -142,6 +142,24 @@ const router = createRouter({
|
||||||
},
|
},
|
||||||
component: () => import("@/views/business/legal/policyDetail.vue"),
|
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