fix:不能静态导入前端路由全部改为懒加载方式

src/components/base/messageBubble/index.vue

@@ -118,9 +118,8 @@ const handleToMoreNews = (item) => {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .box4 {
-	margin-left: 20px;
 	width: 792px;
 	height: 450px;
 	border-radius: 10px;

src/router/modules/InnovationSubject.js

 //创新主体
-import InnovationSubject from "@/views/innovationSubject/index.vue";
-import InnovationInstitution from "@/views/innovationSubject/innovativeInstitutions/index.vue";
+const InnovationSubject = () => import('@/views/innovationSubject/index.vue')
+const InnovationInstitution = () => import('@/views/innovationSubject/innovativeInstitutions/index.vue')
+
 
 const innovationSubjectRoutes = [
   //创新主体

src/router/modules/ZMGame.js

 //ZM博弈概览
-import ZMGame from "@/views/ZMGame/index.vue";
+const ZMGame = () => import('@/views/ZMGame/index.vue')
 
 const ZMGameRoutes = [
   {

src/router/modules/ZMOverView.js

 //ZM博弈概览
-import ZMOverview from "@/views/ZMOverView/index.vue";
+const ZMOverview = () => import('@/views/ZMOverView/index.vue')
 
 const ZMOverviewRoutes = [
     {

src/router/modules/bill.js

 // 法案相关
-import BillHome from "@/views/bill/billHome/index.vue";
-import BillLayoutContainer from "@/views/bill/billLayout/index.vue";
-import BillLayout from "@/views/bill/index.vue";
-import BillIntroduction from "@/views/bill/introdoction/index.vue";
-import BillBackground from "@/views/bill/background/index.vue";
-import BillTemplate from "@/views/bill/template/index.vue";
-import BillDeepDigLayout from "@/views/bill/deepDig/index.vue";
-import BillDeepDigProcessOverview from "@/views/bill/deepDig/processOverview/index.vue";
-import BillDeepDigProcessAnalysis from "@/views/bill/deepDig/processAnalysis/index.vue";
-import BillDeepDigPoliContribution from "@/views/bill/deepDig/poliContribution/index.vue";
-import BillInfluenceLayout from "@/views/bill/influence/index.vue";
-import BillInfluenceIndustry from "@/views/bill/influence/industry/index.vue";
-import BillInfluenceScientificResearch from "@/views/bill/influence/scientificResearch/index.vue";
-import BillRelevantCircumstance from "@/views/bill/relevantCircumstance/index.vue";
+const BillHome = () => import('@/views/bill/billHome/index.vue')
+const BillLayoutContainer = () => import('@/views/bill/billLayout/index.vue')
+const BillLayout = () => import('@/views/bill/index.vue')
+const BillIntroduction = () => import('@/views/bill/introdoction/index.vue')
+const BillBackground = () => import('@/views/bill/background/index.vue')
+const BillTemplate = () => import('@/views/bill/template/index.vue')
+const BillDeepDigLayout = () => import('@/views/bill/deepDig/index.vue')
+const BillDeepDigProcessOverview = () => import('@/views/bill/deepDig/processOverview/index.vue')
+const BillDeepDigProcessAnalysis = () => import('@/views/bill/deepDig/processAnalysis/index.vue')
+const BillDeepDigPoliContribution = () => import('@/views/bill/deepDig/poliContribution/index.vue')
+const BillInfluenceLayout = () => import('@/views/bill/influence/index.vue')
+const BillInfluenceIndustry = () => import('@/views/bill/influence/industry/index.vue')
+const BillInfluenceScientificResearch = () => import('@/views/bill/influence/scientificResearch/index.vue')
+const BillRelevantCircumstance = () => import('@/views/bill/relevantCircumstance/index.vue')
 
 
 const billRoutes = [

src/router/modules/characterPage.js

 // 人物主页
-import CharacterPage from "@/views/characterPage/index.vue";
-
+const CharacterPage = () => import('@/views/characterPage/index.vue')
 
 const characterPageRoutes = [
   // 人物主页

src/router/modules/company.js

 //企业主页
-import companyPages from "@/views/companyPages/index.vue";
+const companyPages = () => import('@/views/companyPages/index.vue')
 
 const companyPagesRoutes = [
   // 智库系统的主要路由

src/router/modules/comprehensiveSearch.js

 // 综合搜索
-import ComprehensiveSearch from '@/views/comprehensiveSearch/index.vue'
-import SearchResults from '@/views/comprehensiveSearch/searchResults/index.vue'
-import Chat from '@/views/comprehensiveSearch/chat/index.vue'
+const ComprehensiveSearch = () => import('@/views/comprehensiveSearch/index.vue')
+const SearchResults = () => import('@/views/comprehensiveSearch/searchResults/index.vue')
+const Chat = () => import('@/views/comprehensiveSearch/chat/index.vue')
 
 const comprehensiveSearchRoutes = [
    // 综合搜索

src/router/modules/cooperationRestrictions.js

 // 合作限制
-import CooperationRestrictions from "@/views/coopRestriction/index.vue";
-import CooperationRestrictionsDetail from "@/views/coopRestriction/detail/index.vue";
+const CooperationRestrictions = () => import('@/views/coopRestriction/index.vue')
+const CooperationRestrictionsDetail = () => import('@/views/coopRestriction/detail/index.vue')
 
 const cooperationRestrictionsRoutes = [
   // 合作限制

src/router/modules/decree.js

 // 政令
-import Decree from "@/views/decree/decreeHome/index.vue";
-import DecreeLayoutContainer from "@/views/decree/decreeLayout/index.vue";
-import DecreeOverviewLayout from "@/views/decree/decreeLayout/overview/index.vue";
-import DecreeIntroduction from "@/views/decree/decreeLayout/overview/introduction/index.vue";
-import DecreeBackground from "@/views/decree/decreeLayout/overview/background/index.vue";
-import DecreeDeepDig from "@/views/decree/decreeLayout/deepdig/index.vue";
-import DecreeInfluence from "@/views/decree/decreeLayout/influence/index.vue";
-import Institution from "@/views/decree/institution/index.vue"
-import DecreeOriginal from "@/views/decree/decreeOriginal/index.vue"
+const Decree = () => import('@/views/decree/decreeHome/index.vue')
+const DecreeLayoutContainer = () => import('@/views/decree/decreeLayout/index.vue')
+const DecreeOverviewLayout = () => import('@/views/decree/decreeLayout/overview/index.vue')
+const DecreeIntroduction = () => import('@/views/decree/decreeLayout/overview/introduction/index.vue')
+const DecreeBackground = () => import('@/views/decree/decreeLayout/overview/background/index.vue')
+const DecreeDeepDig = () => import('@/views/decree/decreeLayout/deepdig/index.vue')
+const DecreeInfluence = () => import('@/views/decree/decreeLayout/influence/index.vue')
+const Institution = () => import('@/views/decree/institution/index.vue')
+const DecreeOriginal = () => import('@/views/decree/decreeOriginal/index.vue')
+
 
 const decreeRoutes = [
   // 政令首页

src/router/modules/exportControl.js

 // 出口管制
-import ExportControl from "@/views/exportControl/index.vue";
+const ExportControl = () => import('@/views/exportControl/index.vue')
 
 const exportControlRoutes = [
   // 出口管制首页

src/router/modules/finance.js

 // 投融资限制
-import Finance from "@/views/finance/index.vue";
+const Finance = () => import('@/views/finance/index.vue')
 
 const financeRoutes = [
      // 投融资限制

src/router/modules/marketAccessRestrictions.js

 // 市场准入限制
-import MarketAccessRestrictions from "@/views/marketAccessRestrictions/marketAccessHome/index.vue";
-import MarketAccessLayout from "@/views/marketAccessRestrictions/marketAccessLayout/index.vue";
-import MarketAccessOverview from "@/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue";
-import MarketAccessCase from "@/views/marketAccessRestrictions/marketAccessLayout/case/index.vue";
-import MarketSingleCaseLayout from "@/views/marketAccessRestrictions/singleCaseLayout/index.vue";
-import MarketSingleCaseOverview from "@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue";
-import MarketSingleCaseDeepdig from "@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue";
+const MarketAccessRestrictions = () => import('@/views/marketAccessRestrictions/marketAccessHome/index.vue')
+const MarketAccessLayout = () => import('@/views/marketAccessRestrictions/marketAccessLayout/index.vue')
+const MarketAccessOverview = () => import('@/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue')
+const MarketAccessCase = () => import('@/views/marketAccessRestrictions/marketAccessLayout/case/index.vue')
+const MarketSingleCaseLayout = () => import('@/views/marketAccessRestrictions/singleCaseLayout/index.vue')
+const MarketSingleCaseOverview = () => import('@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue')
+const MarketSingleCaseDeepdig = () => import('@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue')
 
 const marketAccessRestrictionsRoutes = [
-
   // 市场准入限制首页
   {
     path: "/marketAccessRestrictions",

src/router/modules/news.js

-//新闻速览
-import newsBrief from "@/views/newsBrief/index.vue";
-// 新闻事件分析
-import NewsAnalysis from "@/views/newsAnalysis/index.vue";
+const newsBrief = () => import('@/views/newsBrief/index.vue')
+const NewsAnalysis = () => import('@/views/newsAnalysis/index.vue')
 
 const newsRoutes = [
 	//新闻速览页面路由

src/router/modules/portal.js

-import Portal from "@/views/portals/portal1/index.vue";
-import Portal2 from "@/views/portals/portal2/index.vue";
+const Portal = () => import('@/views/portals/portal1/index.vue')
+const Portal2 = () => import('@/views/portals/portal2/index.vue')
 
 const portalRoutes = [
   // 门户

src/router/modules/riskSignal.js

 // 风险信号
-import RiskSignal from "@/views/riskSignal/index.vue"
+const RiskSignal = () => import('@/views/riskSignal/index.vue')
 
 const riskSignalRoutes = [
    //风险信号页面路由
@@ -10,8 +10,7 @@ const riskSignalRoutes = [
      meta: {
        title: "风险信号"
      }
-   },
-
+   }
 ]
 
 export default riskSignalRoutes
\ No newline at end of file

src/router/modules/ruleRestrictions.js

 // 规则限制
-import RuleRestriction from "@/views/ruleRestriction/index.vue";
-import RuleRestrictionDetail from "@/views/ruleRestriction/detail/index.vue";
+const RuleRestriction = () => import('@/views/ruleRestriction/index.vue')
+const RuleRestrictionDetail = () => import('@/views/ruleRestriction/detail/index.vue')
 
 const ruleRestrictionsRoutes = [
   // 规则限制

src/router/modules/scientificFunding.js

 // 科研资助体系
-import ScientificFunding from "@/views/scientificFunding/index.vue";
+const ScientificFunding = () => import('@/views/scientificFunding/index.vue')
 
 const scientificFundingRoutes = [
   // 科研资助体系

src/router/modules/technologyFigures.js

 //科技人物观点
-import TechnologyFigures from "@/views/technologyFigures/index.vue";
+const TechnologyFigures = () => import('@/views/technologyFigures/index.vue')
 
 const technologyFiguresRoutes = [
   {

src/router/modules/thinktank.js

 // 智库相关
-import thinkTank from "@/views/thinkTank/index.vue";
-import ThinkTankDetail from "@/views/thinkTank/ThinkTankDetail/index.vue";
-import ReportDetail from "@/views/thinkTank/ReportDetail/index.vue";
-import ReportOriginal from "@/views/thinkTank/reportOriginal/index.vue"
+const thinkTank = () => import('@/views/thinkTank/index.vue')
+const ThinkTankDetail = () => import('@/views/thinkTank/ThinkTankDetail/index.vue')
+const ReportDetail = () => import('@/views/thinkTank/ReportDetail/index.vue')
+const ReportOriginal = () => import('@/views/thinkTank/reportOriginal/index.vue')
+
 const thinktankRoutes = [
   // 智库系统的主要路由
   {

src/router/modules/writtingAssitant.js

 // 智能写报
-import WrittingAsstaint from "@/views/writtingAsstaint/index.vue";
+const WrittingAsstaint = () => import('@/views/writtingAsstaint/index.vue')
 
 const writtingRoutes = [
   // 智能写报路由

src/views/marketAccessRestrictions/marketAccessHome/index.vue

@@ -372,7 +372,7 @@
 					<SourceTabList :sourceTabList="categoryList" :activeSouceTabId="activeCateId" @clickTab="handleClickCate">
 					</SourceTabList>
 					<div class="select-box">
-						<div class="paixu-btn" @click="handleSwithSort">
+						<!-- <div class="paixu-btn" @click="handleSwithSort">
 							<div class="icon1">
 								<img v-if="isSort" src="@/assets/icons/shengxu1.png" alt="" />
 								<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
@@ -382,7 +382,7 @@
 								<img v-if="isSort" src="@/assets/icons/shengxu2.png" alt="" />
 								<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
 							</div>
-						</div>
+						</div> -->
 						<!-- <el-select v-model="releaseTime" placeholder="选择发布时间" style="width: 120px">
 							<el-option
 								v-for="item in releaseTimeList"
@@ -391,6 +391,15 @@
 								:value="item.value"
 							/>
 						</el-select> -->
+						<el-select v-model="isSort" placeholder="发布时间" style="width: 166px" @change="handlePxChange">
+							<template #prefix>
+								<div style="display: flex; align-items: center; height: 100%">
+									<img src="@/assets/icons/jiangxu1.png" style="width: 14px; height: 14px" />
+								</div>
+							</template>
+							<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+
 					</div>
 				</div>
 				<div class="home-main-footer-main">
@@ -401,12 +410,13 @@
 								<div class="title">{{ "发布时间" }}</div>
 							</div>
 							<div class="left-box1-main">
-								<div class="checkbox-group">
-									<el-checkbox v-for="year in surveyYearList" :key="year.id" v-model="checkedSurveyYears"
-										:label="year.id" class="filter-checkbox" @change="handleChangeCheckedSurveyYears">
+								<el-checkbox-group class="checkbox-group" v-model="checkedSurveyYears"
+									@change="handleChangeCheckedSurveyYears">
+									<el-checkbox class="filter-checkbox" label="全部时间"> 全部时间 </el-checkbox>
+									<el-checkbox v-for="year in surveyYearList" :key="year.id" :label="year.id" class="filter-checkbox">
 										{{ year.name }}
 									</el-checkbox>
-								</div>
+								</el-checkbox-group>
 							</div>
 						</div>
 						<div class="left-box2">
@@ -415,12 +425,12 @@
 								<div class="title">{{ "科技领域" }}</div>
 							</div>
 							<div class="left-box2-main">
-								<div class="checkbox-group">
-									<el-checkbox v-for="area in areaList" :key="area.id" v-model="checkedAreaList" :label="area.id"
-										class="filter-checkbox" @change="handleChangeCheckedAreas">
+								<el-checkbox-group class="checkbox-group" v-model="checkedAreaList" @change="handleChangeCheckedAreas">
+									<el-checkbox class="filter-checkbox" label="全部领域"> 全部领域 </el-checkbox>
+									<el-checkbox v-for="area in areaList" :key="area.id" :label="area.id" class="filter-checkbox">
 										{{ area.name }}
 									</el-checkbox>
-								</div>
+								</el-checkbox-group>
 							</div>
 						</div>
 						<div class="left-box2">
@@ -429,12 +439,12 @@
 								<div class="title">{{ "发布机构" }}</div>
 							</div>
 							<div class="left-box2-main">
-								<div class="checkbox-group">
-									<el-checkbox v-for="area in insList" :key="area.id" v-model="checkedInsList" :label="area.id"
-										class="filter-checkbox" @change="handleChangeCheckedIns">
+								<el-checkbox-group class="checkbox-group" v-model="checkedInsList" @change="handleChangeCheckedIns">
+									<el-checkbox class="filter-checkbox" label="全部机构"> 全部机构 </el-checkbox>
+									<el-checkbox v-for="area in insList" :key="area.id" :label="area.id" class="filter-checkbox">
 										{{ area.name }}
 									</el-checkbox>
-								</div>
+								</el-checkbox-group>
 							</div>
 						</div>
 						<div class="left-box2">
@@ -443,12 +453,13 @@
 								<div class="title">{{ "受调查国家/地区" }}</div>
 							</div>
 							<div class="left-box2-main">
-								<div class="checkbox-group">
-									<el-checkbox v-for="area in countryList" :key="area.id" v-model="checkedCountryList" :label="area.id"
-										class="filter-checkbox" @change="handleChangeCheckedCountry">
+								<el-checkbox-group class="checkbox-group" v-model="checkedCountryList"
+									@change="handleChangeCheckedCountry">
+									<el-checkbox class="filter-checkbox" label="全部"> 全部 </el-checkbox>
+									<el-checkbox v-for="area in countryList" :key="area.id" :label="area.id" class="filter-checkbox">
 										{{ area.name }}
 									</el-checkbox>
-								</div>
+								</el-checkbox-group>
 							</div>
 						</div>
 					</div>
@@ -462,7 +473,7 @@
 
 						<div class="right-main">
 							<el-empty v-if="surveyInfoList.length === 0" description="当前条件下暂无数据" :image-size="200" />
-							<div v-else class="item" v-for="(item, index) in surveyInfoList" :key="index"
+							<div v-else class="right-main-item" v-for="(item, index) in surveyInfoList" :key="index"
 								@click="handleClickToSurveyDetail()">
 								<div class="item-left">{{ item.SEARCHDATE }}</div>
 								<div class="item-center">
@@ -1287,10 +1298,23 @@ const handleClickCate = item => {
 	handleGetInsList()
 	handleGetSurveyList();
 };
-const isSort = ref(true); // true 升序  false 倒序
-const handleSwithSort = () => {
-	isSort.value = !isSort.value;
-};
+
+
+const releaseTimeList = ref([
+	{
+		label: "按发布时间倒序",
+		value: true
+	},
+	{
+		label: "按发布时间升序",
+		value: false
+	}
+]);
+
+const isSort = ref(true); // true 倒序  false 升序
+// const handleSwithSort = () => {
+// 	isSort.value = !isSort.value;
+// };
 
 const surveyYearList = ref([
 	{
@@ -1315,7 +1339,16 @@ const surveyYearList = ref([
 	}
 ]);
 const checkedSurveyYears = ref([]);
-const handleChangeCheckedSurveyYears = () => {
+const handleChangeCheckedSurveyYears = (val) => {
+	if (val.includes("全部时间") && val.length > 1) {
+		if (val[val.length - 1] === "全部时间") {
+			checkedSurveyYears.value = ["全部时间"];
+		} else {
+			checkedSurveyYears.value = val.filter(item => item !== "全部时间");
+		}
+	} else if (val.length === 0) {
+		checkedSurveyYears.value = ["全部时间"];
+	}
 	handleGetSurveyList();
 };
 
@@ -1338,8 +1371,18 @@ const handleGetAreaList = async () => {
 	} catch (error) { }
 };
 
-const handleChangeCheckedAreas = () => {
-	// console.log(checkedAreaList.value);
+const handleChangeCheckedAreas = (val) => {
+	// console.log('val',val);
+
+	if (val.includes("全部领域") && val.length > 1) {
+		if (val[val.length - 1] === "全部领域") {
+			checkedAreaList.value = ["全部领域"];
+		} else {
+			checkedAreaList.value = val.filter(item => item !== "全部领域");
+		}
+	} else if (val.length === 0) {
+		checkedAreaList.value = ["全部领域"];
+	}
 	handleGetSurveyList();
 };
 
@@ -1382,8 +1425,17 @@ const handleGetInsList = async () => {
 }
 
 
-const handleChangeCheckedIns = () => {
+const handleChangeCheckedIns = (val) => {
 	// console.log(checkedAreaList.value);
+	if (val.includes("全部机构") && val.length > 1) {
+		if (val[val.length - 1] === "全部机构") {
+			checkedInsList.value = ["全部机构"];
+		} else {
+			checkedInsList.value = val.filter(item => item !== "全部机构");
+		}
+	} else if (val.length === 0) {
+		checkedInsList.value = ["全部机构"];
+	}
 	handleGetSurveyList();
 };
 
@@ -1427,8 +1479,16 @@ const handleGetAllSearchCountry = async () => {
 	}
 }
 handleGetAllSearchCountry()
-const handleChangeCheckedCountry = () => {
-	// console.log(checkedAreaList.value);
+const handleChangeCheckedCountry = (val) => {
+	if (val.includes("全部") && val.length > 1) {
+		if (val[val.length - 1] === "全部") {
+			checkedCountryList.value = ["全部"];
+		} else {
+			checkedCountryList.value = val.filter(item => item !== "全部");
+		}
+	} else if (val.length === 0) {
+		checkedCountryList.value = ["全部"];
+	}
 	handleGetSurveyList();
 };
 
@@ -1464,7 +1524,7 @@ const handleGetSurveyList = async () => {
 		publishOrg: checkedInsList.value.toString(),
 		searchCountry: checkedCountryList.value.toString(),
 		sortField: "date",
-		sortOrder: isSort.value ? "asc" : "desc"
+		sortOrder: isSort.value ? "desc" : "asc"
 	};
 	try {
 		const res = await getSurveyList(params);
@@ -2307,14 +2367,10 @@ onMounted(async () => {
 				height: 450px;
 				display: flex;
 				justify-content: center;
-
+				gap: 16px;
 				.box3 {
 					width: 792px;
 					height: 450px;
-					border-radius: 10px;
-					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
-					background: rgba(255, 255, 255, 1);
-
 					.box3-header {
 						height: 48px;
 						border-bottom: 1px solid rgba(240, 242, 244, 1);
@@ -2451,13 +2507,8 @@ onMounted(async () => {
 				}
 
 				.box4 {
-					margin-left: 20px;
 					width: 792px;
 					height: 450px;
-					border-radius: 10px;
-					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
-					background: rgba(255, 255, 255, 1);
-
 					.box4-header {
 						width: 792px;
 						height: 48px;
@@ -2577,12 +2628,6 @@ onMounted(async () => {
 				.box5 {
 					width: 1064px;
 					height: 460px;
-					// box-sizing: border-box;
-					// border: 1px solid rgba(234, 236, 238, 1);
-					// border-radius: 10px;
-					// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
-					// background: rgba(255, 255, 255, 1);
-
 					.box-header-right {
 						height: 48px;
 						display: flex;
@@ -2699,11 +2744,11 @@ onMounted(async () => {
 				.box6 {
 					width: 521px;
 					height: 460px;
-					box-sizing: border-box;
-					border: 1px solid rgba(234, 236, 238, 1);
-					border-radius: 10px;
-					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
-					background: rgba(255, 255, 255, 1);
+					// box-sizing: border-box;
+					// border: 1px solid rgba(234, 236, 238, 1);
+					// border-radius: 10px;
+					// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+					// background: rgba(255, 255, 255, 1);
 
 					.box-header-right {
 						height: 48px;
@@ -3234,15 +3279,16 @@ onMounted(async () => {
 						padding-top: 6px;
 						// min-height: 586px;
 						height: calc(100% - 108px);
-						max-height: 1540px;
+						// max-height: 1540px;
 						border-bottom: 1px solid rgba(230, 231, 232, 1);
 
 						// height: 780px;
-						.item {
-							// height: 154px;
-							min-height: 94px;
+						.right-main-item {
+							height: 154px;
+							// min-height: 94px;
 							display: flex;
 							cursor: pointer;
+							height: max-content;
 
 							&:hover {
 								background: var(--color-bg-hover) !important;
@@ -3277,6 +3323,7 @@ onMounted(async () => {
 								}
 
 								.line {
+									height: 100%;
 									margin-left: 14px;
 									width: 2px;
 									min-height: 64px;
@@ -3389,9 +3436,11 @@ onMounted(async () => {
 
 								.item-right-footer {
 									width: 1022px;
+									height: 24px;
 									margin-top: 9px;
 									display: flex;
 									gap: 8px;
+									margin-bottom: 10px;
 
 									.area-box {
 										display: flex;