Skip to content

R
risk-monitor
提交 93b74825 authored 作者: 张烨's avatar 张烨
浏览文件
操作

feat:市场准入限制-337和232增加功能板块

上级 302579c7
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 625 行增加 和 535 行删除
src/views/marketAccessRestrictions/com/AiTips.vue 0 → 100644
浏览文件 @ 93b74825
<template>
<div class="view-box">
<div class="icon-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="">
</div>
<div class="tips-content">{{ props.tips }}</div>
<div class="icon-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="">
</div>
</div>
</template>
<script setup lang="ts" name="AiTips">
const props = defineProps({
tips: {
type: String,
default: ''
}
});
</script>
<style scoped lang="scss">
.view-box {
width: 100%;
display: flex;
align-items: center;
padding: 7px 12px;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.icon-left {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.tips-content {
color: rgb(5, 95, 194);
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-left: 13px;
flex: 1;
}
.icon-right {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/com/RelatedEvent.vue 0 → 100644
浏览文件 @ 93b74825
<template>
<AnalysisBox :title="props.title" :showAllBtn="false" height="auto">
<div class="box-main">
<div v-for="(item, index) in props.listData" :key="index" class="box-item">
<div class="item-tag">行政令</div>
<div class="item-right">
<div class="item-head">
<div class="item-name one-line-ellipsis">{{ item.name }}</div>
<div class="item-time">{{ item.time }}</div>
</div>
<div class="item-text one-line-ellipsis">{{ item.text }}</div>
</div>
</div>
</div>
</AnalysisBox>
</template>
<script setup lang="ts" name="RelatedEvent">
const props = defineProps({
listData: {
type: Array as any,
default: () => ([])
},
title: {
type: String,
default: ""
}
})
</script>
<style scoped lang="scss">
.box-main {
padding: 0 16px 16px;
.box-item {
border-top: 1px solid var(--bg-black-5);
padding: 6px;
display: flex;
font-size: 16px;
font-family: Source Han Sans CN;
.item-tag {
width: 80px;
height: 28px;
line-height: 28px;
border-radius: 14px;
text-align: center;
margin-right: 16px;
margin-top: 7px;
color: var(--color-yellow-100);
background-color: var(--color-yellow-10);
}
.item-right {
width: 20px;
flex: auto;
line-height: 30px;
.item-head {
display: flex;
.item-name {
width: 20px;
flex: auto;
font-weight: bold;
color: var(--text-primary-80-color);
}
.item-time {
margin-left: 100px;
flex: none;
color: var(--text-primary-65-color);
}
}
.item-text {
color: var(--text-primary-65-color);
}
}
}
.box-item:last-child {
border-bottom: 1px solid var(--bg-black-5);
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/com/SurveyConclusion.vue 0 → 100644
浏览文件 @ 93b74825
<template>
<AnalysisBox :title="title" :showAllBtn="false" height="auto">
<el-empty v-if="!props.listData?.length" description="暂无数据" :image-size="200" />
<div v-else class="box-main">
<div class="data-list">
<div class="data-item" v-for="(item, index) in props.listData" :key="index">
<div class="item-head">
<div class="item-name">{{ item.title }}</div>
<div class="button-box">
<div class="button-icon">
<img src="../assets/icons/open.png" alt="" />
</div>
<div class="button-text">跳转原文</div>
</div>
</div>
<div class="item-down">
<div class="item-text" v-for="(text, num) in item.data" :key="num">{{ text }}</div>
</div>
</div>
</div>
<AiTips :tips="tips"></AiTips>
</div>
</AnalysisBox>
</template>
<script setup lang="ts" name="SurveyConclusion">
import AiTips from "@/views/marketAccessRestrictions/com/AiTips.vue";
const props = defineProps({
listData: {
type: Array as any,
default: () => ([])
},
title: {
type: String,
default: ""
},
tips: {
type: String,
default: ""
}
})
</script>
<style scoped lang="scss">
.box-main {
padding: 0 22px 20px;
.data-list {
margin-bottom: 16px;
border-top: 1px solid rgba(234, 236, 238, 1);
.data-item {
.item-head {
padding: 0 20px;
height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 1);
display: flex;
align-items: center;
.item-name {
width: 20px;
flex: auto;
font-family: Source Han Sans CN;
font-size: 18px;
font-weight: bold;
line-height: 30px;
color: var(--text-primary-80-color);
}
.button-box {
display: flex;
align-items: center;
margin-left: 50px;
.button-icon {
width: 16px;
height: 16px;
font-size: 0;
margin-right: 4px;
img {
width: 100%;
height: 100%;
}
}
.button-text {
color: var(--color-primary-100);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 12px;
}
}
}
.item-text {
letter-spacing: 1px;
padding: 12px 20px 12px 40px;
color: rgba(59, 65, 75, 1);
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/com/SurveyHistory.vue 0 → 100644
浏览文件 @ 93b74825
<template>
<div class="view-box">
<el-empty v-if="!props.surveyList?.length" description="当前条件下暂无数据" :image-size="200" />
<div class="timeline-item" v-for="(item, index) in props.surveyList" :key="item.searchid" @click="onNavigateToDetail(item)">
<div class="timeline-date">
<div class="date-text">{{ item.searchdatezh.slice(0,4) }}</div>
<div class="date-text">{{ item.searchdatezh.slice(5) }}</div>
</div>
<div class="timeline-line-box">
<div class="timeline-icon">
<img v-if="item.sortimageurl" :src="item.sortimageurl" alt="" />
<div v-else class="default-dot"></div>
</div>
<div class="timeline-line" v-if="index !== props.surveyList.length - 1"></div>
</div>
<div class="timeline-content-card">
<div class="item-head">
<div :class="`item-tag tag-${item.sortcode}`">{{ item.sortcode }}</div>
<div class="item-name">{{ item.searchname }}</div>
<div class="item-state">
<span class="dot">•</span> {{ item.casestatus }}
</div>
</div>
<div class="card-body">
{{ item.content }}
</div>
<div class="card-footer">
<div class="footer-left-tags">
<AreaTag v-for="(name, num) in item.searchArea" :key="num" :tagName="name"></AreaTag>
</div>
<div class="footer-right-flags">
<div class="flag-icon" v-for="(name, num) in item.countryImage" :key="num">
<img :src="name" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup name="SurveyHistory">
import router from "@/router";
const props = defineProps({
surveyList: {
type: Array,
default: () => ([]),
},
})
const onNavigateToDetail = item => {
window.sessionStorage.setItem("curTabName", item.searchname);
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: { id: item.sortcode, searchId: item.searchid }
});
window.open(curRoute.href, "_blank");
};
</script>
<style scoped lang="scss">
.view-box {
min-height: 600px;
width: 100%;
padding: 18px 27px 0 24px;
border-top: 1px solid rgba(234, 236, 238, 1);
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.timeline-item {
display: flex;
cursor: pointer;
.timeline-date {
width: 80px;
text-align: right;
margin-right: 16px;
.date-text {
height: 24px;
font-size: 16px;
font-weight: 700;
color: var(--color-main-active);
line-height: 24px;
letter-spacing: 1px;
}
}
.timeline-line-box {
width: 40px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.timeline-icon {
width: 32px;
height: 32px;
z-index: 2;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
img {
width: 100%;
height: 100%;
}
.default-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: orange;
}
}
.timeline-line {
width: 2px;
flex: 1;
background: #eaeeef;
margin: 4px 0;
}
}
.timeline-content-card {
width: 20px;
flex: auto;
padding: 2px 16px 0;
margin-bottom: 30px;
&:hover .item-head .item-name {
color: var(--color-main-active);
text-decoration: underline;
}
.item-head {
display: flex;
align-items: center;
margin-bottom: 10px;
.item-tag {
width: 48px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 4px;
font-weight: bold;
font-size: 16px;
margin-right: 12px;
}
.tag-337 {
border: 1px solid #91caff;
background: #e6f4ff;
color: #055fc2;
}
.tag-232 {
border: 1px solid #b37feb;
background: #f9f0ff;
color: #722ed1;
}
.tag-301 {
border: 1px solid #ffd591;
background: #fff7e6;
color: #fa8c16;
}
.item-name {
font-size: 18px;
line-height: 18px;
font-weight: bold;
color: #3b414b;
width: 20px;
flex: auto;
}
.item-state {
font-size: 16px;
color: #84888e;
color: var(--color-main-active);
margin-left: 100px;
}
}
.card-body {
font-size: 16px;
color: #5f656c;
line-height: 30px;
margin-bottom: 8px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.card-footer {
display: flex;
gap: 8px;
align-items: center;
.footer-left-tags {
display: flex;
gap: 8px;
.area-tag {
padding: 2px 12px;
background: #e6f7ff;
border: 1px solid #91d5ff;
color: #1890ff;
border-radius: 4px;
font-size: 14px;
}
}
.footer-right-flags {
display: flex;
gap: 4px;
.flag-icon {
width: 12px;
height: 24px;
img {
border-radius: 50%;
border: 1px solid #eee;
width: 24px;
height: 100%;
object-fit: cover;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/case/337/index.vue
浏览文件 @ 93b74825
......@@ -45,7 +45,6 @@
{{ area.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
<!-- 发布时间 -->
......@@ -89,46 +88,7 @@
</div>
<div class="right">
<AnalysisBox title="337调查历程" width="1224px" height="auto">
<div class="right-main" v-loading="listLoading">
<div class="timeline-item" v-for="(item, index) in surveyInfoList" :key="index"
@click="handleToSingleCase(item)">
<div class="timeline-date">
<div class="date-text">{{ item.timeZH.slice(0,4) }}</div>
<div class="date-text">{{ item.timeZH.slice(5) }}</div>
</div>
<div class="timeline-line-box">
<div class="timeline-icon">
<img v-if="item.sortImageUrl" :src="item.sortImageUrl" alt="" />
<div v-else class="default-dot"></div>
</div>
<div class="timeline-line" v-if="index !== surveyInfoList.length - 1"></div>
</div>
<div class="timeline-content-card">
<div class="card-header">
<div class="tag-box">
<div class="tag-337">{{ item.tag }}</div>
<div class="title">{{ item.title }}</div>
</div>
<div class="status" :class="{ 'status-active': true }">
<span class="dot">•</span> {{ item.status }}
</div>
</div>
<div class="card-body">
{{ item.content }}
</div>
<div class="card-footer">
<div class="footer-left-tags">
<AreaTag v-for="(area, idx) in item.areaList" :key="idx" :tagName="area"></AreaTag>
</div>
<div class="footer-right-flags">
<div class="flag-icon" v-for="(flag, fidx) in item.countryList" :key="fidx">
<img :src="flag" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<SurveyHistory v-loading="listLoading" :surveyList="surveyInfoList"></SurveyHistory>
<div class="right-footer">
<div class="footer-left">{{ `共${totalDiscussNum}项调查` }}</div>
<div class="footer-right">
......@@ -144,14 +104,11 @@
<script setup>
import { ref, onMounted, watch, computed } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { getSearchAllArea, getSearchAllYear, getSurveyList, getSearchAllCountry } from "@/api/marketAccessRestrictions";
import AnalysisBox from "@/components/base/boxBackground/analysisBox.vue"
const route = useRoute();
import SurveyHistory from "@/views/marketAccessRestrictions/com/SurveyHistory.vue"
// 顶部过滤项
const searchText = ref("");
......@@ -255,22 +212,9 @@ const handleFetchSurveyList = async () => {
sortOrder: isSort.value ? "asc" : "desc"
};
const res = await getSurveyList(params);
if (res.code === 200 && res.data) {
surveyInfoList.value = res.data.content.map(item => {
return {
time: item.searchdate,
timeZH: item.searchdatezh,
title: item.searchname,
content: item.content,
status: item.casestatus,
areaList: item.searchArea || [],
countryList: item.countryImage || [],
tag: item.sortcode || "337",
id: item.searchid,
sortImageUrl: item.sortimageurl
};
});
totalDiscussNum.value = res.data.totalElements || 0;
if (res.code === 200) {
surveyInfoList.value = res.data?.content || [];
totalDiscussNum.value = res.data?.totalElements || 0;
}
} catch (error) {
console.error("获取调查列表失败", error);
......@@ -289,17 +233,6 @@ const handleSearch = () => {
handleFetchSurveyList();
};
const handleToSingleCase = item => {
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: "337",
searchId: item.id + ""
}
});
window.open(curRoute.href, "_blank");
};
// 监听过滤条件
watch(
[checkedSurveyYears, checkedAreaList, checkedCountryList, isSort, filterStage, filterParty, filterReason],
......@@ -359,8 +292,7 @@ onMounted(async () => {
.case-wrapper {
width: 1600px;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 35px;
padding: 20px 0;
.wrapper-header {
height: 32px;
......@@ -375,11 +307,9 @@ onMounted(async () => {
align-items: center;
.search-box {
:deep(.el-input__wrapper) {
background-color: #fff;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
}
background-color: #fff;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
}
.dropdown-filters {
......@@ -426,7 +356,7 @@ onMounted(async () => {
.wrapper-main {
display: flex;
justify-content: space-between;
gap: 16px;
.left {
width: 360px;
......@@ -462,21 +392,10 @@ onMounted(async () => {
.checkbox-group {
padding: 10px 0 0 25px;
// display: flex;
// flex-direction: column;
// .area-grid,
// .year-grid,
// .country-grid {
// display: grid;
// grid-template-columns: repeat(2, 1fr);
// gap: 4px;
// }
.filter-checkbox {
width: 130px;
margin-bottom: 8px;
height: 32px;
:deep(.el-checkbox__label) {
font-size: 16px;
color: #5f656c;
......@@ -499,204 +418,8 @@ onMounted(async () => {
}
.right {
width: 1224px;
.right-header {
height: 48px;
display: flex;
align-items: center;
padding: 0 20px;
.icon {
width: 22px;
img {
width: 100%;
}
}
.title {
margin-left: 12px;
font-size: 20px;
font-weight: 700;
color: var(--color-main-active);
}
}
.right-main {
padding: 18px 27px 0 24px;
border-top: 1px solid var(--bg-black-5);
.timeline-item {
display: flex;
cursor: pointer;
.timeline-date {
width: 100px;
text-align: right;
padding-right: 20px;
.date-text {
height: 24px;
font-size: 16px;
font-weight: 700;
color: var(--color-main-active);
line-height: 24px;
letter-spacing: 1px;
}
}
.timeline-line-box {
width: 40px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.timeline-icon {
width: 32px;
height: 32px;
z-index: 2;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
}
.default-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: orange;
}
}
.timeline-line {
width: 2px;
flex: 1;
background: #eaeeef;
margin: 4px 0;
}
}
.timeline-content-card {
flex: 1;
border-radius: 8px;
padding: 0 20px;
margin-left: 10px;
margin-bottom: 24px;
transition: all 0.3s;
&:hover {
.card-header>.tag-box>.title {
color: var(--color-main-active);
text-decoration: underline;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.tag-box {
display: flex;
align-items: center;
gap: 12px;
.tag-337 {
padding: 2px 10px;
border: 1px solid #91caff;
background: #e6f4ff;
color: #055fc2;
border-radius: 4px;
font-weight: 700;
font-size: 16px;
}
.title {
font-size: 18px;
font-weight: 700;
color: #3b414b;
}
}
.status {
font-size: 16px;
color: #84888e;
.dot {
margin-right: 4px;
}
}
.status-active {
color: var(--color-main-active);
}
}
.card-body {
font-size: 16px;
color: #5f656c;
line-height: 1.6;
margin-bottom: 16px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.card-footer {
display: flex;
gap: 8px;
align-items: center;
.footer-left-tags {
display: flex;
gap: 8px;
.area-tag {
padding: 2px 12px;
background: #e6f7ff;
border: 1px solid #91d5ff;
color: #1890ff;
border-radius: 4px;
font-size: 14px;
}
}
.footer-right-flags {
display: flex;
gap: 4px;
.flag-icon {
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
border: 1px solid #eee;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
}
}
}
flex: auto;
width: 20px;
.right-footer {
height: 74px;
......@@ -704,7 +427,6 @@ onMounted(async () => {
justify-content: space-between;
align-items: center;
padding: 0 40px;
border-top: 1px solid rgba(234, 236, 238, 1);
.footer-left {
font-size: 14px;
......@@ -714,8 +436,4 @@ onMounted(async () => {
}
}
}
.filter-checkbox {
width: 130px;
}
</style>
src/views/marketAccessRestrictions/marketAccessLayout/index.vue
浏览文件 @ 93b74825
<template>
<div class="wrap">
<div class="header">
<div class="header-top">
<div class="left">
<div class="icon">
<img :src="curSurvey.image" alt="" />
</div>
<div class="info">
<div class="title">{{ curSurvey.title }}</div>
<div class="content">
{{ curSurvey.desc }}
</div>
</div>
<div class="page-box">
<div class="page-top">
<div class="head-box">
<div class="head-icon">
<img :src="curSurvey.image" alt="" />
</div>
<!-- <div class="right">
<div class="icon">
<div class="head-info">
<div class="head-name one-line-ellipsis">{{ curSurvey.title }}</div>
<div class="head-text one-line-ellipsis">{{ curSurvey.desc }}</div>
</div>
<!-- <div class="head-button">
<div class="button-icon">
<img src="./assets/images/button-icon.png" alt="" />
</div>
<div class="text">{{ "查看官网" }}</div>
<div class="button-text">{{ "查看官网" }}</div>
</div> -->
</div>
<div class="header-footer">
<div
class="btn-item"
:class="{ btnItemActive: activeBtnName === item.name }"
v-for="(item, index) in btnList"
:key="index"
@click="handleClickBtn(item)"
>
<div class="page-tabs">
<div :class="['tab-item', {'tab-active': activeName==item.name}]" v-for="(item, index) in tabList" :key="index" @click="handleClickBtn(item)">
<div class="icon">
<img :src="item.acitveIcon" alt="" v-if="activeBtnName === item.name" />
<img :src="item.activeIcon" alt="" v-if="activeName==item.name" />
<img :src="item.icon" alt="" v-else />
</div>
<div class="text" :class="{ textActive: activeBtnName === item.name }">
<div class="text" :class="{ textActive: activeName==item.name }">
{{ item.name }}
</div>
</div>
......@@ -58,17 +48,17 @@ import Img301 from "./assets/images/301.png";
import { useRoute } from "vue-router";
const route = useRoute();
const btnList = ref([
const tabList = ref([
{
name: "调查案件",
icon: icon2,
acitveIcon: icon2Active,
activeIcon: icon2Active,
path: "/marketAccessLayout/case"
},
{
name: "数据统计",
icon: icon1,
acitveIcon: icon1Active,
activeIcon: icon1Active,
path: "/marketAccessLayout/overview"
}
]);
......@@ -78,150 +68,136 @@ const curSurvey = computed(() => {
return {
title: "301调查",
desc: '由美国贸易代表办公室依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"发起的调查',
image: Img301
image: Img301,
};
} else if (route.query.id === "232") {
return {
title: "232调查",
desc: "依据《1962年贸易扩展法》第232条款，授权美国商务部对“特定进口产品是否威胁或损害美国国家安全”而开展的全面调查。",
image: Img232
image: Img232,
};
} else {
return {
title: "337调查",
desc: '美国国际贸易委员会根据《1930年关税法》第337节及相关修正案进行的调查，主要针对进口贸易中的知识产权侵权行为以及其他不公平竞争行为',
image: Img337
image: Img337,
};
}
});
const activeBtnName = ref("调查案件");
const activeName = ref("调查案件");
const handleClickBtn = item => {
activeBtnName.value = item.name;
activeName.value = item.name;
router.push({
path: item.path,
query: {
id: route.query.id
}
query: { id: route.query.id }
});
};
onMounted(() => {
if (route.path === "/marketAccessLayout/overview") {
activeBtnName.value = "数据统计";
activeName.value = "数据统计";
} else {
activeBtnName.value = "调查案件";
activeName.value = "调查案件";
}
});
</script>
<style lang="scss" scoped>
.wrap {
.page-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #f7f8f9;
.header {
width: 1920px;
height: 148px;
background: rgba(255, 255, 255, 1);
.page-top {
width: 1600px;
margin: 0 auto;
box-sizing: border-box;
border-bottom: 1px solid rgba(230, 231, 232, 1);
background: rgba(255, 255, 255, 1);
.header-top {
.head-box {
width: 100%;
display: flex;
height: 100px;
justify-content: space-between;
.left {
margin-left: 160px;
margin-top: 24px;
display: flex;
.icon {
width: 54px;
height: 54px;
img {
width: 100%;
height: 100%;
}
padding: 30px 0 20px;
.head-icon {
width: 54px;
height: 54px;
font-size: 0px;
margin-right: 16px;
img {
width: 100%;
height: 100%;
}
.info {
margin-left: 14px;
margin-top: -1px;
.title {
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.content {
margin-top: 1px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.head-info {
width: 20px;
flex: auto;
.head-name {
width: 100%;
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: bold;
line-height: 26px;
}
.head-text {
width: 100%;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.right {
margin-top: 24px;
margin-right: 160px;
.head-button {
margin-left: 100px;
width: 120px;
height: 36px;
border-radius: 6px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.icon {
.button-icon {
width: 16px;
height: 16px;
margin-left: 16px;
margin-top: 10px;
position: relative;
z-index: 99;
font-size: 0;
img {
width: 100%;
height: 100%;
}
}
.text {
.button-text {
margin-left: 8px;
margin-top: 7px;
height: 22px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.header-footer {
height: 48px;
margin-left: 160px;
.page-tabs {
display: flex;
gap: 24px;
.btn-item {
align-items: flex-start;
.tab-item {
height: 40px;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
margin-right: 24px;
.icon {
width: 16px;
height: 16px;
margin-top: 16px;
font-size: 0;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 2px;
margin-top: 12px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -234,13 +210,24 @@ onMounted(() => {
font-weight: 700;
}
}
.btnItemActive {
border-bottom: 3px solid var(--color-main-active);
.tab-active {
position: relative;
&::after {
content: "";
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--color-main-active);
}
}
}
}
.main {
width: 1920px;
border-top: 1px solid rgba(230, 231, 232, 1);
background-color: #f7f8f9;
width: 100%;
height: 20px;
flex: auto;
}
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/232/index.vue
浏览文件 @ 93b74825
......@@ -201,13 +201,16 @@ onMounted(() => {
<style lang="scss" scoped>
.wrap {
width: 100%;
height: 100%;
overflow: hidden;
width: 1600px;
margin: 0 auto;
padding: 20px 0;
display: flex;
flex-direction: column;
gap: 16px;
.top {
display: flex;
justify-content: space-between;
margin: 16px 160px;
.item {
width: 388px;
height: 80px;
......@@ -338,7 +341,6 @@ onMounted(() => {
.center {
display: flex;
justify-content: space-between;
margin: 0 160px;
.box1 {
width: 792px;
height: 360px;
......@@ -364,7 +366,6 @@ onMounted(() => {
}
}
.footer {
margin: 16px 160px;
display: flex;
justify-content: space-between;
.box3 {
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/301/index.vue
浏览文件 @ 93b74825
<template>
<div class="wrap">
<!-- <div class="sider-tab-box">
<SiderTabs :siderList="siderTabList" @clickSiderItem="handleClickTabItem" />
</div> -->
<div class="top">
<div class="box1 box" v-loading="box1Loading">
<div class="box-header">
......@@ -143,28 +140,6 @@ import getSankeyChart from "./utils/sankey";
import getPieChart from "./utils/piechart";
import getbarChart from "@/views/bill/utils/barchart";
import { getSearchCountry, getStatArea, getStatNum, getSearchDirection } from "@/api/marketAccessRestrictions";
import SiderTabs from "@/components/base/SiderTabs/index.vue"
// const siderTabList = ref([
// {
// name: '分析内11111',
// active: false
// },
// {
// name: '分析内2',
// active: true
// },
// {
// name: '分析内3',
// active: false
// },
// ])
// const handleClickTabItem = (value) => {
// console.log('val',value);
// }
const selectYear = ref("2025");
......@@ -339,14 +314,12 @@ onMounted(() => {
<style lang="scss" scoped>
.wrap {
overflow: hidden;
position: relative;
.sider-tab-box{
position: absolute;
left: 20px;
top: 20px;
}
width: 1600px;
margin: 0 auto;
padding: 20px 0;
display: flex;
flex-direction: column;
gap: 16px;
.box {
width: 792px;
......@@ -473,7 +446,6 @@ onMounted(() => {
display: flex;
justify-content: center;
gap: 16px;
margin: 16px auto;
.box1 {
.box1-main {
......@@ -494,9 +466,6 @@ onMounted(() => {
display: flex;
justify-content: center;
gap: 16px;
margin: 0 auto;
margin-bottom: 16px;
.box3 {
.box3-main {
height: 304px;
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/index.vue
浏览文件 @ 93b74825
......@@ -41,45 +41,6 @@
</div>
<div class="footer">
<div class="box3" v-loading="box3Loading">
<!-- <div class="box-header">
<div class="header-left"></div>
<div class="title">中国公司受调查情况</div>
<div class="header-btn-box">
<div class="btn" :class="{ btnActive: btnActiveName === '调查次数' }" @click="handleClickBox3Btn('调查次数')">
调查次数
</div>
<div class="btn" :class="{ btnActive: btnActiveName === '注册地分布' }" @click="handleClickBox3Btn('注册地分布')">
注册地分布
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div v-show="btnActiveName === '调查次数'" class="box3-main" id="chart3"></div>
<div v-show="btnActiveName === '注册地分布'" class="box3-main1">
<div class="box3-main1-left">
<div class="box3-main1-left-item" v-for="(item, index) in mapData" :key="index">
<div class="box3-main1-left-item-left">{{ index + 1 }}</div>
<div class="box3-main1-left-item-center">{{ item.name }}</div>
<div class="box3-main1-left-item-right">
{{ item.value + "次" }}
</div>
</div>
</div>
<div class="box3-main1-right" id="chartMap"></div>
</div>
<div class="box3-footer">
<TipTab />
</div> -->
<AnalysisBox title="中国公司受调查情况">
<template #header-btn>
<div class="header-btn-box">
......@@ -520,25 +481,16 @@ onMounted(() => {
<style lang="scss" scoped>
.wrap {
width: 100%;
overflow: hidden;
position: relative;
.graph-box {
position: absolute;
top: 100px;
left: 100px;
width: 1000px;
height: 600px;
border-radius: 10px;
z-index: 9999;
background: #fff;
}
width: 1600px;
margin: 0 auto;
padding: 20px 0;
display: flex;
flex-direction: column;
gap: 16px;
.top {
display: flex;
justify-content: space-between;
margin: 16px 160px;
.item {
width: 388px;
......@@ -631,36 +583,6 @@ onMounted(() => {
font-weight: 700;
}
// .header-btn-box {
// position: absolute;
// top: 14px;
// right: 120px;
// display: flex;
// .btn {
// margin-left: 8px;
// height: 28px;
// padding: 0 8px;
// box-sizing: border-box;
// border: 1px solid rgba(230, 231, 232, 1);
// border-radius: 4px;
// background: rgba(255, 255, 255, 1);
// text-align: center;
// line-height: 28px;
// color: rgba(59, 65, 75, 1);
// font-family: Microsoft YaHei;
// font-size: 16px;
// font-weight: 400;
// cursor: pointer;
// }
// .btnActive {
// border: 1px solid var(--color-main-active);
// background: rgba(246, 250, 255, 1);
// color: var(--color-main-active);
// }
// }
.header-right {
position: absolute;
top: 14px;
......@@ -684,7 +606,6 @@ onMounted(() => {
.center {
display: flex;
justify-content: space-between;
margin: 0 160px;
.box1 {
width: 792px;
......@@ -717,7 +638,6 @@ onMounted(() => {
}
.footer {
margin: 16px 160px;
display: flex;
justify-content: space-between;
......
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/337/index.vue
浏览文件 @ 93b74825
......@@ -446,9 +446,9 @@ onMounted(() => {
<style lang="scss" scoped>
.deep-dig-container {
display: flex;
padding: 16px 160px;
width: 1600px;
margin: 20px auto;
gap: 16px;
background: #f7f8f9;
.box {
background: #ffffff;
......@@ -553,7 +553,7 @@ onMounted(() => {
}
.left-section {
width: 320px;
width: 480px;
flex-shrink: 0;
.company-list-box {
......@@ -565,11 +565,12 @@ onMounted(() => {
margin-bottom: 16px;
.area-select {
flex: 0 0 100px;
width: 150px;
}
.search-input {
flex: 1;
flex: auto;
width: 20px;
}
}
......@@ -624,7 +625,8 @@ onMounted(() => {
}
.right-section {
flex: 1;
flex: auto;
width: 20px;
display: flex;
flex-direction: column;
gap: 16px;
......
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue
浏览文件 @ 93b74825
......@@ -26,5 +26,6 @@ onMounted(() => {
.deepdig-wrap {
width: 100%;
height: 100%;
overflow-y: auto;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论