合并分支 'lzl-dev' 到 'master'

src/api/exportControl.js

@@ -842,23 +842,21 @@ export function getScientificImpactEntityList(startTime) {
 /**
  * 概览页--获取出口管制制裁措施
  * @param {Object} data
- * @param {string} [data.typeName="实体清单"] - 类型名称
- * @param {boolean} [data.isCn=true] - 是否只看中国实体
- * @param {string[]} [data.techDomains] - 科技领域ID列表
- * @param {number[]} [data.years] - 制裁年份列表
- * @param {string} [data.startDate] - 开始时间
- * @param {string} [data.endDate] - 结束时间
- * @param {string} [data.keyword] - 搜索字段
- * @param {number[]} [data.entityTypes] - 实体类型(2:科研院所；3：高校；4:企业)
- * @param {number} [data.pageNum=1] - 页码
- * @param {number} [data.pageSize=10] - 每页数量
+ * @param {string} [data.typeName="实体清单"] - 类型名称（实体清单、商业管制清单、军事最终用户清单）
+ * @param {boolean} [data.isCn=true] - 是否只看涉华
+ * @param {Array<string>} [data.techDomainIds] - 科技领域ID
+ * @param {Array<number>} [data.years] - 制裁年份
  */
 export function getExportControlList(data) {
 	return request200(
 		request({
 			method: "POST",
-			url: "/api/sanctionList/pageQuery",
+			url: "/api/entitiesDataCount/getSanctionProcess",
 			data
 		})
 	);
 }
+
+
+
+// 
\ No newline at end of file

src/api/exportControlV2.0.js

@@ -225,3 +225,344 @@ export function getDeepMiningIndustryEntity(params) {
         params,
     })
 }
+
+
+// 单次制裁-制裁概况-基本信息
+/**
+ * @param {Object} params
+ * @param {string} params.sanRecordId - 制裁记录ID
+ * @header token
+ */
+export function getSingleSanctionOverview(params) {
+    return request({
+        method: 'GET',
+        url: `/api/sanctionList/record/getDetail`,
+        params,
+    })
+}
+
+// 单次制裁-制裁概况-制裁实体国家分布
+/**
+ * @param {Object} params
+ * @param {string} params.sanRecordId - 制裁记录ID
+ * @header token
+ */
+export function getSingleSanctionEntityCountry(params) {
+    return request({
+        method: 'GET',
+        url: `/api/sanctionList/statistics/el/countryRegion`,
+        params,
+    })
+}
+
+// 单次制裁-制裁概况-制裁背景
+/**
+ * @param {Object} data
+ * @param {string} data.sanRecordId - 制裁记录ID
+ * @param {number} [data.pageNum=1] - 页码
+ * @param {number} [data.pageSize=3] - 每页数量
+ * @header token
+ */
+export function getSingleSanctionBackground(data) {
+    return request({
+        method: 'POST',
+        url: `/api/sanctionList/record/background`,
+        data,
+    })
+}
+
+// 单次制裁-制裁概况-制裁清单
+/**
+ * @param {Object} data
+ * @param {Integer} data.sanRecordId - 制裁记录ID
+ * @param {Boolean} [data.isOnlyCn=true] - 是否仅查询中国数据
+ * @param {String} [data.domainId] - 科技领域ID
+ * @param {String} [data.searchText] - 搜索文本
+ * @header token
+ */
+export function getSingleSanctionOverviewList(data) {
+    return request({
+        method: 'POST',
+        url: `/api/sanctionList/record/sanList`,
+        data,
+    })
+}
+
+
+// 单次制裁-数据统计-总量统计
+/**
+ * @param {Object} params
+ * @param {string} params.sanRecordId - 制裁记录ID
+ * @header token
+ */
+export function getSingleSanctionTotalCount(params) {
+    return request({
+        method: 'GET',
+        url: `/api/sanctionList/statistics/el/total`,
+        params,
+    })
+}
+
+// 单次制裁-数据统计-制裁实体领域分布情况
+/**
+ * @param {Object} params
+ * @param {string} params.sanRecordId - 制裁记录ID
+ * @param {string} [params.startDate] - 开始时间
+ * @param {string} [params.endDate] - 结束时间
+ * @header token
+ */
+export function getSingleSanctionDomainCount(params) {
+    return request({
+        method: 'GET',
+        url: `/api/sanctionList/statistics/el/domain`,
+        params,
+    })
+}
+
+// 单次制裁-数据统计-制裁实体类型分布情况
+/**
+ * @param {Object} params
+ * @param {string} params.sanRecordId - 制裁记录ID
+ * @param {string} [params.startDate] - 开始时间
+ * @param {string} [params.endDate] - 结束时间
+ * @header token
+ */
+export function getSingleSanctionEntityTypeCount(params) {
+    return request({
+        method: 'GET',
+        url: `/api/sanctionList/statistics/el/entityType`,
+        params,
+    })
+}
+
+
+// 单次制裁-数据统计-制裁实体国家分布
+/**
+ * @param {Object} params
+ * @param {string} params.sanRecordId - 制裁记录ID
+ * @header token
+ */
+export function getSingleSanctionEntityCountryCount(params) {
+    return request({
+        method: 'GET',
+        url: `/api/sanctionList/statistics/el/countryRegion`,
+        params,
+    })
+}
+
+
+// 单次制裁-数据统计-制裁实体地域分布情况
+/**
+ * @param {Object} params
+ * @param {string} params.sanRecordId - 制裁记录ID
+ * @param {string} [params.startDate] - 开始时间
+ * @param {string} [params.endDate] - 结束时间
+ * @header token
+ */
+export function getSingleSanctionEntityRegionCount(params) {
+    return request({
+        method: 'GET',
+        url: `/api/sanctionList/statistics/el/region`,
+        params,
+    })
+}
+
+
+// 单次制裁-深度挖掘-本次制裁实体清单列表
+/**
+ * @param {Object} params
+ * @param {Integer} data.sanRecordId - 制裁记录ID
+ * @param {Boolean} [data.isOnlyCn=true] - 是否仅查询中国数据
+ * @param {String} [data.domainId] - 科技领域ID
+ * @param {String} [data.searchText] - 搜索文本
+ * @header token
+ */
+export function getSingleSanctionEntityList(data) {
+    return request({
+        method: 'POST',
+        url: `/api/sanctionList/record/sanListByType`,
+        data,
+    })
+}
+
+
+// 单次制裁-深度挖掘-制裁实体供应链信息
+/**
+ * @param {Object} params
+ * @param {Integer} params.orgId - 组织ID
+ * @header token
+ */
+export function getSingleSanctionEntitySupplyChain(params) {
+    return request({
+        method: 'GET',
+        url: `/api/sanctionList/record/supplyChain`,
+        params,
+    })
+}
+
+// 单次制裁-深度挖掘-制裁实体股权信息
+/**
+ * @param {Object} params
+ * @param {Integer} params.orgId - 组织ID
+ * @param {Boolean} params.rule - 是否遵循规则
+ * @header token
+ */
+export function getSingleSanctionEntityEquity(params) {
+    return request({
+        method: 'GET',
+        url: `/api/sanctionList/record/shareholding`,
+        params,
+    })
+}
+
+
+// 单次制裁-影响分析-企业规模-营收
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 机构ID
+ * @header token
+ */
+export function getSingleSanctionEntityRevenue(params) {
+    return request({
+        method: 'GET',
+        url: `/api/organization/scale/revenue`,
+        params,
+    })
+}
+
+
+// 单次制裁-影响分析-企业规模-净利润
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 机构ID
+ * @header token
+ */
+export function getSingleSanctionEntityNetProfit(params) {
+    return request({
+        method: 'GET',
+        url: `/api/organization/scale/netProfit`,
+        params,
+    })
+}
+
+
+// 单次制裁-影响分析-企业规模-人员
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 机构ID
+ * @header token
+ */
+export function getSingleSanctionEntityPersonnel(params) {
+    return request({
+        method: 'GET',
+        url: `/api/organization/scale/personnel`,
+        params,
+    })
+}
+
+
+// 单次制裁-影响分析-企业市值变化
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 机构ID
+ * @header token
+ */
+export function getSingleSanctionEntityMarketValue(params) {
+    return request({
+        method: 'GET',
+        url: `/api/organization/marketValue`,
+        params,
+    })
+}
+
+
+// 单次制裁-影响分析-企业研发投入
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 机构ID
+ * @header token
+ */
+export function getSingleSanctionEntityRDInvestment(params) {
+    return request({
+        method: 'GET',
+        url: `/api/organization/rdInvestment`,
+        params,
+    })
+}
+
+
+// 单次制裁-影响分析-企业市场占比
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 机构ID
+ * @header token
+ */
+export function getSingleSanctionEntityMarketShare(params) {
+    return request({
+        method: 'GET',
+        url: `/api/organization/marketShare`,
+        params,
+    })
+}
+
+
+// 单次制裁-影响分析-科研仪器对美依赖情况
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 机构ID
+ * @header token
+ */
+export function getSingleSanctionEntityRDInstrumentDependency(params) {
+    return request({
+        method: 'GET',
+        url: `/api/organization/instrument/getDependencyUS`,
+        params,
+    })
+}
+
+
+// 单次制裁-影响分析-科研仪器进口国分布
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 机构ID
+ * @header token
+ */
+export function getSingleSanctionEntityRDInstrumentImportCountry(params) {
+    return request({
+        method: 'GET',
+        url: `/api/organization/instrument/getOriginCount`,
+        params,
+    })
+}
+
+
+// 单次制裁-影响分析-新增国际合作项目
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 机构ID
+ * @param {String} params.domainId - 科技领域ID
+ * @header token
+ */
+export function getSingleSanctionEntityInternationalCooperation(params) {
+    return request({
+        method: 'GET',
+        url: `/api/organization/project/icCount`,
+        params,
+    })
+}
+
+
+// 单次制裁-影响分析-新增国际合作论文
+/**
+ * @param {Object} params
+ * @param {Integer} params.id - 机构ID
+ * @param {String} params.domainId - 科技领域ID
+ * @header token
+ */
+export function getSingleSanctionEntityInternationalPaper(params) {
+    return request({
+        method: 'GET',
+        url: `/api/organization/paper/icCount`,
+        params,
+    })
+}
\ No newline at end of file

src/views/exportControl/index.vue

@@ -741,26 +741,8 @@ import listIcon from "./assets/images/icon-list.png";
 import dotIcon from "./assets/images/info2-icon.png";
 import entityIcon from "./assets/images/icon-entity.png";
 import comTitle from "./assets/images/panel1_1.png";
-
-import newsImg from "@/assets/images/news-img.png";
-import newsImg1 from "@/assets/images/newsImg1.png";
-
 import getMultiLineChart from "./utils/multiLineChart";
-
-import bill1 from "./assets/images/bill1.png";
-import bill2 from "./assets/images/bill2.png";
-import bill3 from "./assets/images/bill3.png";
-import bill4 from "./assets/images/bill4.png";
-import bill5 from "./assets/images/bill5.png";
-import bill6 from "./assets/images/bill6.png";
-import bill7 from "./assets/images/bill7.png";
-import bill8 from "./assets/images/bill8.png";
-import bill9 from "./assets/images/bill9.png";
-import bill10 from "./assets/images/bill10.png";
-import bill11 from "./assets/images/bill11.png";
-import bill12 from "./assets/images/bill12.png";
 import icon01 from "./assets/images/jianzhu.png";
-
 import {
 	getEntitiesDataCount,
 	getEntitiesDataInfo,
@@ -795,7 +777,7 @@ const techOptions = [
 	{ label: "太空", value: 13 },
 	{ label: "核", value: 14 }
 ];
-const timeOptions = ["全部时间", "2025年", "2024年", "2023年", "2022年", "2021年"];
+const timeOptions = ["全部时间", "2025年", "2024年", "2023年", "2022年", "2021年", "2020年", "2019年", "2018年", "2017年", "2016年", "2015年", "2014年", "2013年", "2012年", "2011年", "2010年", "2009年", "2008年", "2007年", "2006年", "2005年", "2004年", "2003年", "2002年", "2001年"];
 const checkedTech = ref([0]);
 const checkedTime = ref(["全部时间"]);
 
@@ -1246,24 +1228,30 @@ const fetchSanctionList = async () => {
 		const params = {
 			pageNum: currentPageAll.value,
 			pageSize: pageSizeAll.value,
-			techDomains: techDomains,
+			techDomainIds: techDomains,
 			years: years,
 			isCn: false,
-			typeName: ""
+			typeName: "实体清单"
 		};
 
 		const res = await getExportControlList(params);
 		if (res && res.content) {
 			sanctionList.value = res.content.map(item => {
-				const tags = Array.isArray(item.techDomains) ? item.techDomains : item.techDomain ? [item.techDomain] : [];
+				const tags = Array.isArray(item.techDomains) ? item.techDomains : item.techDomain ? [item.techDomain] : item.techDomainList || [];
 
-				const fullTime = item.startTime ? formatAnyDateToChinese(item.startTime) : item.publishDate || item.date;
+				const fullTime = item.startTime ? formatAnyDateToChinese(item.startTime) : item.postDate || item.publishDate || item.date;
 				let year = "";
 				let dateStr = fullTime;
-				if (typeof fullTime === "string" && fullTime.includes("年")) {
+				if (typeof fullTime === "string") {
+                    if (fullTime.includes("年")) {
                         const parts = fullTime.split("年");
                         year = parts[0];
                         dateStr = parts[1].replace(/\s+/g, "");
+                    } else if (fullTime.includes("-")) {
+                        const parts = fullTime.split("-");
+                        year = parts[0];
+                        dateStr = parts.slice(1).join("-");
+                    }
 				}
 
 				return {
@@ -1274,7 +1262,7 @@ const fetchSanctionList = async () => {
 					title: item.entityNameZh || item.entityName || item.title || item.name,
 					desc: item.sanReason || item.description || item.summary || item.content,
 					tags: tags,
-					countTag: item.ruleOrgCount ? `${item.ruleOrgCount}家关联实体` : item.countTag || ""
+					countTag: item.cnEntityCount ? `${item.cnEntityCount}家中国实体` : item.ruleOrgCount ? `${item.ruleOrgCount}家关联实体` : item.countTag || ""
 				};
 			});
 			totalAll.value = res.totalElements;
@@ -1456,12 +1444,14 @@ const fetchSocialMediaInfo = async () => {
 	try {
 		const data = await getSocialMediaInfo();
 		if (data && Array.isArray(data)) {
+			// console.log(data);
 			socialMediaList.value = data.map(item => ({
 				avatar: item.personImage,
 				name: item.personName,
 				time: formatTime(item.time),
 				source: item.orgName,
-				content: item.remarks
+				content: item.remarks,
+				personId: item.personId
 			}));
 		}
 	} catch (err) {
@@ -1493,7 +1483,8 @@ const handlePerClick = item => {
 	const route = router.resolve({
 		path: "/characterPage",
 		query: {
-			type: item.type || [1, 2, 3][Math.floor(Math.random() * 3)]
+			type: item.type || [1, 2, 3][Math.floor(Math.random() * 3)],
+			personId: item.personId
 		}
 	});
 	window.open(route.href, "_blank");
@@ -1674,7 +1665,7 @@ const handleClose = () => {
 	dialogVisible.value = false;
 };
 const handleOrgClick = item => {
-	console.log(item, item.name);
+	// console.log(item, item.name);
 	currentOrgList.value = item.ruleOrgList;
 	dialogVisible.value = true;
 };
@@ -1685,7 +1676,7 @@ const handleMediaClose = () => {
 	mediaVisible.value = false;
 };
 const handleMediaClick = item => {
-	console.log(item, item.name);
+	// console.log(item, item.name);
 	currentMedia.value = item.content;
 	mediaVisible.value = true;
 };
@@ -3076,6 +3067,7 @@ const handleMediaClick = item => {
 					padding-top: 14px;
 					position: relative;
 					.main-title {
+						width: 800px;
 						font-size: 20px;
 						font-weight: 700;
 						line-height: 26px;

src/views/exportControl/v2.0EntityList/components/sanctionsOverview/components/listPage/RuleSubsidiaryDialog.vue

@@ -94,6 +94,10 @@ const props = defineProps({
 	totalCount: {
 		type: Number,
 		default: 0
+	},
+	dataList: {
+		type: Array,
+		default: () => []
 	}
 });
 
@@ -107,92 +111,21 @@ const visible = computed({
 const currentPage = ref(1);
 const pageSize = ref(10);
 
-// Mock Data
-const tableData = ref([
-	{
-		id: 1,
-		name: "讯飞智元信息科技有限公司",
-		domains: ["人工智能"],
-		equityRatio: "100%",
-		location: "深圳",
-		revenue: 325
-	},
-	{
-		id: 2,
-		name: "科大讯飞（北京）有限公司",
-		domains: ["通信网络", "集成电路"],
-		equityRatio: "100%",
-		location: "--",
-		revenue: 305
-	},
-	{
-		id: 3,
-		name: "深圳讯飞智慧科技有限公司",
-		domains: ["人工智能"],
-		equityRatio: "100%",
-		location: "深圳",
-		revenue: 325
-	},
-	{
-		id: 4,
-		name: "安徽讯飞寰语科技有限公司",
-		domains: ["通信网络", "集成电路"],
-		equityRatio: "100%",
-		location: "--",
-		revenue: 305
-	},
-	{
-		id: 5,
-		name: "天津讯飞信息科技有限公司",
-		domains: ["航空航天"],
-		equityRatio: "100%",
-		location: "--",
-		revenue: 289
-	},
-	{
-		id: 6,
-		name: "安徽听见科技有限公司",
-		domains: ["人工智能"],
-		equityRatio: "100%",
-		location: "深圳",
-		revenue: 270
-	},
-	{
-		id: 7,
-		name: "广州市讯飞樽鸿信息技术有限公司",
-		domains: ["航空航天"],
-		equityRatio: "69.8%",
-		location: "--",
-		revenue: 289
-	},
-	{
-		id: 8,
-		name: "苏州科大讯飞教育科技有限公司",
-		domains: ["人工智能"],
-		equityRatio: "66.3%",
-		location: "深圳",
-		revenue: 270
-	},
-	{
-		id: 9,
-		name: "深圳讯飞互动电子有限公司",
-		domains: ["人工智能"],
-		equityRatio: "57.1%",
-		location: "香港",
-		revenue: 255
-	},
-	{
-		id: 10,
-		name: "讯飞医疗科技股份有限公司",
-		domains: ["生物技术"],
-		equityRatio: "51%",
-		location: "深圳",
-		revenue: 270
-	}
-]);
+const tableData = computed(() => {
+	const start = (currentPage.value - 1) * pageSize.value;
+	const end = start + pageSize.value;
+	return props.dataList.slice(start, end).map(item => ({
+		...item,
+		name: item.orgName,
+		domains: item.techDomains || [],
+		equityRatio: item.equityRatio ? (item.equityRatio * 100).toFixed(2) + '%' : '--',
+		location: '--',
+		revenue: item.revenue || '--'
+	}));
+});
 
 const handleCurrentChange = val => {
-	console.log("Page changed:", val);
+	currentPage.value = val;
 };
 
 const tableRowClassName = ({ rowIndex }) => {

src/views/exportControl/v2.0EntityList/components/sanctionsOverview/components/listPage/index.vue

@@ -104,8 +104,8 @@
 						<el-table-column label="50%规则子企业" min-width="280" show-overflow-tooltip align="right">
 							<template #default="{ row }">
 								<div class="rule-cell" v-if="row.ruleOrgCount > 0">
-									<div class="rule-text" :title="row.ruleOrgList && row.ruleOrgList.length > 0 ? row.ruleOrgList[0].orgName : ''">
-										{{ row.ruleOrgList && row.ruleOrgList.length > 0 ? row.ruleOrgList[0].orgName : '' }}...等
+									<div class="rule-text" :title="row.ruleOrgList?.[0]?.orgName || ''">
+										{{ row.ruleOrgList?.[0]?.orgName || '' }}...等
 									</div>
 									<el-link class="rule-link" type="primary" :underline="false" @click="handleRuleClick(row)">{{ row.ruleOrgCount }}家 ></el-link>
 								</div>
@@ -132,6 +132,7 @@
 		v-model="ruleDialogVisible"
 		:company-name="currentRuleCompany"
 		:total-count="currentRuleCount"
+		:data-list="currentRuleList"
 	/>
 </template>
 
@@ -227,10 +228,12 @@ const customDateRange = ref("");
 const ruleDialogVisible = ref(false);
 const currentRuleCompany = ref("");
 const currentRuleCount = ref(0);
+const currentRuleList = ref([]);
 
 const handleRuleClick = (row) => {
-	currentRuleCompany.value = row.entityName;
+	currentRuleCompany.value = row.entityNameZh || row.entityName;
 	currentRuleCount.value = row.ruleOrgCount;
+	currentRuleList.value = row.ruleOrgList || [];
 	ruleDialogVisible.value = true;
 };
 

src/views/exportControl/v2.0SingleSanction/index.vue

@@ -6,7 +6,7 @@
             <div>
                 <div class="title">
                     {{ headerTitle.title }}
-                    <span>{{ headerTitle.titleEn }}</span>
+                    <!-- <span>{{ headerTitle.titleEn }}</span> -->
                 </div>
                 <div class="department">
                     {{ headerTitle.department }}
@@ -35,7 +35,10 @@
         </div>
     </div>
     <div class="main">
-        <sanctions-overview v-if="activeIndex === 0"></sanctions-overview>
+        <sanctions-overview 
+            v-if="activeIndex === 0" 
+            :data="singleSanctionOverview"
+        ></sanctions-overview>
         <data-statistics v-if="activeIndex === 1"></data-statistics>
         <deep-mining v-if="activeIndex === 2"></deep-mining>
         <impact-analysis v-if="activeIndex === 3"></impact-analysis>
@@ -44,7 +47,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
 import sanctionsOverview from "./components/sanctionsOverview/index.vue"
 import dataStatistics from "./components/dataStatistics/index.vue"
@@ -62,12 +65,55 @@ import icon2Active from "../assets/icons/icon2_active.png";
 import icon3 from "../assets/icons/icon3.png";
 import icon3Active from "../assets/icons/icon3_active.png";
 
+import { getSingleSanctionOverview } from "@/api/exportControlV2.0.js"
+
+// 获取URL参数
+const sanRecordId = ref("")
+const getUrlParams = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    sanRecordId.value = urlParams.get("id") || ""
+}
+
+// console.log(sanRecordId.value)
+// 单次制裁-制裁概况-基本信息
+const singleSanctionOverview = ref({})
+const getSingleSanctionOverviewData = async () => {
+    if (!sanRecordId.value) return
+    try {
+        const res = await getSingleSanctionOverview({
+            sanRecordId: sanRecordId.value
+        })
+        if (res.code === 200) {
+            singleSanctionOverview.value = res.data || {}
+            
+            // 格式化日期
+            let dateStr = "";
+            if (singleSanctionOverview.value.postDate) {
+                const date = new Date(singleSanctionOverview.value.postDate);
+                if (!isNaN(date.getTime())) {
+                    dateStr = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+                } else {
+                    dateStr = singleSanctionOverview.value.postDate;
+                }
+            }
+
+            // 更新头部信息
+            headerTitle.value = {
+                ...headerTitle.value,
+                title: `${dateStr}《${singleSanctionOverview.value.sanTitleZh || singleSanctionOverview.value.sanTitle}》`,
+                titleEn: singleSanctionOverview.value.sanTitle || "",
+                department: singleSanctionOverview.value.fileCode || ""
+            }
+        }
+    } catch (error) {
+        console.error("获取制裁概况失败:", error)
+    }
+}
+
+
 
 const headerTitle = ref({
     img: title,  
-    title: "2025年9月12日《对实体清单的添加和修订 》",
-    titleEn: "",
-    department: "2025-17893(90 FR 44496)"
 })
 
 const activeIndex = ref(0)
@@ -96,7 +142,10 @@ const headerNavList = ref([
 ])
 
 
-
+onMounted(() => {
+    getUrlParams()
+    getSingleSanctionOverviewData()
+})
 </script>
 
 <style scoped lang="scss">