提交 685c8c6a authored 作者: 付康's avatar 付康

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

Lzl dev 查看合并请求 !77
...@@ -90,7 +90,7 @@ const headerTitleClasses = computed(() => [ ...@@ -90,7 +90,7 @@ const headerTitleClasses = computed(() => [
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
position: relative; position: relative;
// margin-bottom: 100px; margin-bottom: 100px;
} }
.container-header { .container-header {
......
...@@ -1513,20 +1513,24 @@ watch(box8selectetedTime, () => { ...@@ -1513,20 +1513,24 @@ watch(box8selectetedTime, () => {
}); });
const handleToPosi = id => { const handleToPosi = id => {
// 0 618 1240 2350 let top = 0;
switch (id) { switch (id) {
case "position2": case "position2":
containerRef.value.scrollTop = isShow.value ? 634 : 980; top = isShow.value ? 634 : 980;
break; break;
case "position3": case "position3":
containerRef.value.scrollTop = isShow.value ? 1204 : 1550; top = isShow.value ? 1204 : 1550;
break; break;
case "position4": case "position4":
containerRef.value.scrollTop = isShow.value ? 2334 : 2680; top = isShow.value ? 2334 : 2680;
break; break;
default: default:
containerRef.value.scrollTop = 0; top = 0;
} }
containerRef.value.scrollTo({
top: top,
behavior: "smooth"
});
}; };
const tabList = ref([ const tabList = ref([
......
<template> <template>
<div class="home-wrapper"> <div class="home-wrapper">
<div class="home-header"> <div class="search-header" v-show="isShow">
<div class="home-main-header-center">
<el-input v-model="searchExportControlText" style="width: 800px; height: 100%" placeholder="搜索出口管制" />
<div class="search">
<div class="search-icon">
<img src="@/assets/icons/search-icon.png" alt="" />
</div>
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
<div class="home-header" v-show="!isShow">
<div class="header-item">国家科技安全</div> <div class="header-item">国家科技安全</div>
<div class="header-item">></div> <div class="header-item">></div>
<div class="header-item back-item" @click="handleBackHome">中美博弈概览</div> <div class="header-item back-item" @click="handleBackHome">中美博弈概览</div>
<div class="header-item">></div> <div class="header-item">></div>
<div class="header-item">出口管制</div> <div class="header-item">出口管制</div>
</div> </div>
<div class="home-main"> <div class="home-main" ref="homeMainRef" :class="{ 'scroll-main': isShow }">
<div class="home-main-header"> <div class="home-main-header">
<div class="home-main-header-center"> <div class="home-main-header-center" v-show="!isShow">
<!-- <el-input <el-input v-model="searchExportControlText" style="width: 800px; height: 100%" placeholder="搜索出口管制" />
v-model="searchExportControlText"
style="width: 100%; height: 48px"
size="large"
placeholder="搜索出口管制调查"
:suffix-icon="Search"
/> -->
<el-input v-model="searchExportControlText" style="width: 800px; height: 100%" placeholder="搜索出口管制调查" />
<div class="search"> <div class="search">
<div class="search-icon"> <div class="search-icon">
<img src="@/assets/icons/search-icon.png" alt="" /> <img src="@/assets/icons/search-icon.png" alt="" />
...@@ -25,40 +55,26 @@ ...@@ -25,40 +55,26 @@
<div class="search-text" @click="handleSearch">搜索</div> <div class="search-text" @click="handleSearch">搜索</div>
</div> </div>
</div> </div>
<!-- <div class="home-main-header-footer"> <div class="home-main-header-btn-box" v-show="!isShow">
<div class="home-main-header-footer-item"> <div class="btn" @click="handleToPosi('position1')">
<div class="item-top">1096</div>
<div class="item-footer">实体清单</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">2633</div>
<div class="item-footer">商业管制清单</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">162</div>
<div class="item-footer">关键和新型技术清单</div>
</div>
</div> -->
<div class="home-main-header-btn-box">
<div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">{{ "最新动态" }}</div> <div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div> </div>
</div> </div>
<div class="btn" @click="scrollToTop('position2')"> <div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div> <div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div> </div>
</div> </div>
<div class="btn" @click="scrollToTop('position3')"> <div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "统计概览" }}</div> <div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div> </div>
</div> </div>
<div class="btn" @click="scrollToTop('position4')"> <div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div> <div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" /> <img src="@/assets/icons/arrow-right-icon.png" alt="" />
...@@ -557,9 +573,15 @@ ...@@ -557,9 +573,15 @@
</div> </div>
</div> </div>
<div class="right-footer"> <div class="right-footer">
<div class="total-count">{{ totalAll }}项调查</div> <div class="total-count">{{ totalAll }}</div>
<el-pagination v-model:current-page="currentPageAll" :page-size="pageSizeAll" :total="totalAll" <el-pagination
layout="prev, pager, next" background @current-change="handlePageChangeAll" /> v-model:current-page="currentPageAll"
:page-size="pageSizeAll"
:total="totalAll"
layout="prev, pager, next"
background
@current-change="handlePageChangeAll"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -607,6 +629,9 @@ ...@@ -607,6 +629,9 @@
<script setup> <script setup>
import { onMounted, ref, computed, reactive, shallowRef, watch } from "vue"; import { onMounted, ref, computed, reactive, shallowRef, watch } from "vue";
import scrollToTop from "@/utils/scrollToTop"; import scrollToTop from "@/utils/scrollToTop";
import { useContainerScroll } from "@/hooks/useScrollShow";
const homeMainRef = ref(null);
const { isShow } = useContainerScroll(homeMainRef);
import * as echarts from "echarts"; import * as echarts from "echarts";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
...@@ -658,6 +683,19 @@ import { ...@@ -658,6 +683,19 @@ import {
getExportControlList getExportControlList
} from "@/api/exportControl"; } from "@/api/exportControl";
const handleToPosi = id => {
const element = document.getElementById(id);
if (element && homeMainRef.value) {
const containerRect = homeMainRef.value.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
const top = elementRect.top - containerRect.top + homeMainRef.value.scrollTop;
homeMainRef.value.scrollTo({
top: top,
behavior: "smooth"
});
}
};
// 跳转到单项制裁页面 // 跳转到单项制裁页面
const handleToRiskSignalDetail = item => { const handleToRiskSignalDetail = item => {
const routeData = router.resolve({ const routeData = router.resolve({
...@@ -1185,6 +1223,7 @@ const fetchSanctionList = async () => { ...@@ -1185,6 +1223,7 @@ const fetchSanctionList = async () => {
const handlePageChangeAll = val => { const handlePageChangeAll = val => {
currentPageAll.value = val; currentPageAll.value = val;
fetchSanctionList(); fetchSanctionList();
handleToPosi("position4");
}; };
watch( watch(
...@@ -1316,8 +1355,8 @@ const resourceTabs = [ ...@@ -1316,8 +1355,8 @@ const resourceTabs = [
{ label: "全部制裁", value: "all", disabled: false }, { label: "全部制裁", value: "all", disabled: false },
{ label: "实体清单", value: "entity", disabled: false }, { label: "实体清单", value: "entity", disabled: false },
{ label: "商业管制清单", value: "commerce", disabled: true }, { label: "商业管制清单", value: "commerce", disabled: true },
{ label: "关键与新兴技术清单", value: "tech", disabled: true }, // { label: "关键与新兴技术清单", value: "tech", disabled: true },
{ label: "军事最终用户清单", value: "military", disabled: true } // { label: "军事最终用户清单", value: "military", disabled: true }
]; ];
const activeResourceTab = ref("all"); const activeResourceTab = ref("all");
...@@ -3233,4 +3272,102 @@ const handleMediaClick = item => { ...@@ -3233,4 +3272,102 @@ const handleMediaClick = item => {
} }
} }
} }
.search-header {
width: 100%;
height: 144px;
background: #fff;
overflow: hidden;
.home-main-header-center {
margin-top: 20px;
margin-left: 200px;
width: 800px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
top: 0px;
width: 120px;
height: 46px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-btn-box {
margin-top: 20px;
margin-left: 200px;
display: flex;
gap: 16px;
.btn {
display: flex;
align-items: center;
gap: 9px;
width: 160px;
height: 48px;
border: 1px solid #aed6ff;
box-sizing: border-box;
border-radius: 24px;
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 48px;
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.scroll-main {
height: calc(100% - 144px) !important;
}
</style> </style>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div class="item-position"></div> <div class="item-position"></div>
<div class="content"> <div class="content">
<div class="info"> <div class="info">
<div class="title">2025年新增</div> <div class="title">{{ currentYear }}年新增</div>
</div> </div>
<div class="number"> <div class="number">
<span class="num">{{ totalCount.latestYearCount }}</span> <span class="num">{{ totalCount.latestYearCount }}</span>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<div class="content"> <div class="content">
<div class="info"> <div class="info">
<div class="title">近期制裁新增</div> <div class="title">近期制裁新增</div>
<div class="subtitle">2025年11月12日</div> <!-- <div class="subtitle">{{ totalCount.latestTime }}</div> -->
</div> </div>
<div class="number"> <div class="number">
<span class="num">{{ totalCount.latestTimeCount }}</span> <span class="num">{{ totalCount.latestTimeCount }}</span>
...@@ -342,38 +342,28 @@ const regionTime = ref("all"); ...@@ -342,38 +342,28 @@ const regionTime = ref("all");
const domainTime = ref("all"); const domainTime = ref("all");
const typeTime = ref("all"); const typeTime = ref("all");
const currentYear = new Date().getFullYear();
const timeOptions = [ const timeOptions = [
{ label: "全部时间", value: "all" }, { label: "全部时间", value: "all" },
{ label: "2025年", value: "2025" },
{ label: "2024年", value: "2024" },
{ label: "2023年", value: "2023" },
{ label: "2022年", value: "2022" },
{ label: "2021年", value: "2021" },
{ label: "2020年", value: "2020" },
{ label: "2019年", value: "2019" },
{ label: "2018年", value: "2018" },
{ label: "2017年", value: "2017" },
{ label: "2016年", value: "2016" },
{ label: "2015年", value: "2015" }
]; ];
for (let i = 0; i <= 10; i++) {
const year = currentYear - i;
timeOptions.push({ label: `${year}年`, value: year.toString() });
}
const sanctionCountChartRef = ref(null); const sanctionCountChartRef = ref(null);
const mapChartRef = ref(null); const mapChartRef = ref(null);
const domainChartRef = ref(null); const domainChartRef = ref(null);
const typeChartRef = ref(null); const typeChartRef = ref(null);
const getBarColor = index => { const getBarColor = index => {
if (index === 0) return "linear-gradient(90deg, rgba(255, 77, 79, 0) 0%, rgba(255, 77, 79, 1) 100%)"; if (index === 0) return "linear-gradient(90deg, rgba(255, 77, 79, 0) 0%, rgba(255, 77, 79, 1) 100%)";
if (index === 1 || index === 2) return "linear-gradient(90deg, rgba(255, 172, 77, 0) 0%, rgba(255, 172, 77, 1) 100%)"; if (index === 1 || index === 2) return "linear-gradient(90deg, rgba(255, 172, 77, 0) 0%, rgba(255, 172, 77, 1) 100%)";
return "linear-gradient(90deg, rgba(5, 95, 194, 0) 0%, rgba(5, 95, 194, 1) 100%)"; return "linear-gradient(90deg, rgba(5, 95, 194, 0) 0%, rgba(5, 95, 194, 1) 100%)";
}; };
const updateSanctionCountChart = () => { const updateSanctionCountChart = () => {
if (!sanctionCountChartRef.value) return; if (!sanctionCountChartRef.value) return;
let chart = echarts.getInstanceByDom(sanctionCountChartRef.value); let chart = echarts.getInstanceByDom(sanctionCountChartRef.value);
......
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
</div> </div>
</div> </div>
<div class="left-footer"> <div class="left-footer">
<div class="total-count">{{ totalAll }}调查</div> <div class="total-count">{{ totalAll }}</div>
<el-pagination <el-pagination
v-model:current-page="currentPageAll" v-model:current-page="currentPageAll"
:page-size="pageSizeAll" :page-size="pageSizeAll"
...@@ -291,6 +291,18 @@ watch([selectedDomain, onlyChina], () => { ...@@ -291,6 +291,18 @@ watch([selectedDomain, onlyChina], () => {
const handlePageChangeAll = val => { const handlePageChangeAll = val => {
currentPageAll.value = val; currentPageAll.value = val;
getSanctionUpdate(); getSanctionUpdate();
const container = document.querySelector(".entity-list");
const target = document.querySelector(".left-bottom");
if (container && target) {
const containerRect = container.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
// 148是吸顶头部的高度,减去它以避免标题被遮挡
const top = targetRect.top - containerRect.top + container.scrollTop - 148;
container.scrollTo({
top: top,
behavior: "smooth"
});
}
}; };
// 获取实体清单发布机构 // 获取实体清单发布机构
......
...@@ -84,11 +84,11 @@ const headerNavList = ref([ ...@@ -84,11 +84,11 @@ const headerNavList = ref([
imgActive: icon2Active, imgActive: icon2Active,
title: "深度挖掘" title: "深度挖掘"
}, },
{ // {
img: icon3, // img: icon3,
imgActive: icon3Active, // imgActive: icon3Active,
title: "影响分析" // title: "影响分析"
} // }
]) ])
...@@ -103,11 +103,16 @@ const headerNavList = ref([ ...@@ -103,11 +103,16 @@ const headerNavList = ref([
.entity-list{ .entity-list{
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto;
.header{ .header{
width: 100%; width: 100%;
height: 148px; height: 148px;
background-color: #fff; background-color: #fff;
padding-top: 16px; padding-top: 16px;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
.header-title{ .header-title{
width: 1601px; width: 1601px;
height: 72px; height: 72px;
...@@ -214,7 +219,8 @@ const headerNavList = ref([ ...@@ -214,7 +219,8 @@ const headerNavList = ref([
} }
.main{ .main{
width: 100%; width: 100%;
height: calc(100% - 148px); height: auto;
min-height: calc(100% - 148px);
background-color: #F7F8F9; background-color: #F7F8F9;
} }
} }
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
</div> </div>
<div class="number"> <div class="number">
<span class="num">{{ totalCount.techDomainCount }}</span> <span class="num">{{ totalCount.techDomainCount }}</span>
<span class="unit"></span> <span class="unit"></span>
</div> </div>
</div> </div>
</div> </div>
...@@ -45,9 +45,9 @@ ...@@ -45,9 +45,9 @@
<div class="box"></div> <div class="box"></div>
<div class="text">制裁实体领域分布情况</div> <div class="text">制裁实体领域分布情况</div>
<div class="right-group"> <div class="right-group">
<el-select v-model="domainTime" class="time-select" placeholder="请选择"> <!-- <el-select v-model="domainTime" class="time-select" placeholder="请选择">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select> -->
<div class="btn"> <div class="btn">
<img src="../../assets/数据库按钮.png" alt="" /> <img src="../../assets/数据库按钮.png" alt="" />
<img src="../../assets/下载按钮.png" alt="" /> <img src="../../assets/下载按钮.png" alt="" />
...@@ -73,9 +73,9 @@ ...@@ -73,9 +73,9 @@
<div class="box"></div> <div class="box"></div>
<div class="text">制裁实体类型分布情况</div> <div class="text">制裁实体类型分布情况</div>
<div class="right-group"> <div class="right-group">
<el-select v-model="typeTime" class="time-select" placeholder="请选择"> <!-- <el-select v-model="typeTime" class="time-select" placeholder="请选择">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select> -->
<div class="btn"> <div class="btn">
<img src="../../assets/数据库按钮.png" alt="" /> <img src="../../assets/数据库按钮.png" alt="" />
<img src="../../assets/下载按钮.png" alt="" /> <img src="../../assets/下载按钮.png" alt="" />
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
<div class="main-item"> <div class="main-item">
<div class="title-com"> <div class="title-com">
<div class="box"></div> <div class="box"></div>
<div class="text">制裁实体国家分布</div> <div class="text">制裁实体国家分布情况</div>
<div class="right-group"> <div class="right-group">
<div class="btn"> <div class="btn">
<img src="../../assets/数据库按钮.png" alt="" /> <img src="../../assets/数据库按钮.png" alt="" />
...@@ -141,9 +141,9 @@ ...@@ -141,9 +141,9 @@
<div class="box"></div> <div class="box"></div>
<div class="text">制裁实体地域分布情况</div> <div class="text">制裁实体地域分布情况</div>
<div class="right-group"> <div class="right-group">
<el-select v-model="regionTime" class="time-select" placeholder="请选择"> <!-- <el-select v-model="regionTime" class="time-select" placeholder="请选择">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select> -->
<div class="btn"> <div class="btn">
<img src="../../assets/数据库按钮.png" alt="" /> <img src="../../assets/数据库按钮.png" alt="" />
<img src="../../assets/下载按钮.png" alt="" /> <img src="../../assets/下载按钮.png" alt="" />
......
...@@ -272,7 +272,8 @@ const getUrlParams = () => { ...@@ -272,7 +272,8 @@ const getUrlParams = () => {
sanRecordId.value = urlParams.get("id") || "" sanRecordId.value = urlParams.get("id") || ""
} }
const activeTab = ref(["实体穿透分析", "重点实体识别"]); // const activeTab = ref(["实体穿透分析", "重点实体识别"]);
const activeTab = ref(["实体穿透分析"]);
const activeIndex = ref(0); const activeIndex = ref(0);
const rightActiveTab = ref("supplyChain"); const rightActiveTab = ref("supplyChain");
......
...@@ -514,30 +514,26 @@ onMounted(() => { ...@@ -514,30 +514,26 @@ onMounted(() => {
margin: 0 auto; margin: 0 auto;
padding-top: 16px; padding-top: 16px;
padding-bottom: 50px; padding-bottom: 50px;
.main {
.main { width: 100%;
width: 100%; height: 100%;
height: 100%; display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; .left {
width: 520px;
.left { height: 1119px;
width: 520px; .left-top {
height: 1119px; width: 100%;
height: auto;
.left-top { padding-bottom: 20px;
width: 100%; border-radius: 10px;
height: 582px; box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
padding-bottom: 20px; background-color: #fff;
border-radius: 10px; margin-bottom: 16px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
margin-bottom: 16px;
.left-top-title { .left-top-title {
padding: 22px 20px 22px 27px; padding: 22px 20px 22px 27px;
width: 100%; width: 100%;
height: 286px; height: auto;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -569,7 +565,7 @@ onMounted(() => { ...@@ -569,7 +565,7 @@ onMounted(() => {
font-size: 16px; font-size: 16px;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 24px;
overflow: hidden; // Ensure it respects the container width overflow: hidden;
&.link { &.link {
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
...@@ -591,26 +587,10 @@ onMounted(() => { ...@@ -591,26 +587,10 @@ onMounted(() => {
&.tags { &.tags {
gap: 8px; gap: 8px;
overflow-x: auto; // Allow horizontal scrolling flex-wrap: wrap;
white-space: nowrap; // Prevent wrapping overflow: visible;
padding-bottom: 4px; // Add some space for scrollbar
/* Custom Scrollbar */
&::-webkit-scrollbar {
height: 4px;
}
&::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 2px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
.tag { .tag {
flex-shrink: 0; // Prevent tags from shrinking
padding: 1px 8px; padding: 1px 8px;
background: rgba(246, 250, 255, 1); background: rgba(246, 250, 255, 1);
border-radius: 4px; border-radius: 4px;
......
...@@ -162,11 +162,16 @@ onMounted(() => { ...@@ -162,11 +162,16 @@ onMounted(() => {
.entity-list{ .entity-list{
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto;
.header{ .header{
width: 100%; width: 100%;
height: 148px; height: 148px;
background-color: #fff; background-color: #fff;
padding-top: 16px; padding-top: 16px;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
.header-title{ .header-title{
width: 1601px; width: 1601px;
height: 72px; height: 72px;
...@@ -300,7 +305,8 @@ onMounted(() => { ...@@ -300,7 +305,8 @@ onMounted(() => {
} }
.main{ .main{
width: 100%; width: 100%;
height: calc(100% - 148px); height: auto;
min-height: calc(100% - 148px);
background-color: #F7F8F9; background-color: #F7F8F9;
} }
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论