cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页样式优化

Browse Source
This commit is contained in:
fmk1023
2025-11-28 14:32:07 +08:00
parent cf25a6feb1
commit ae00eb3d6f
1 changed files with 333 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

654
src/views/Jyh/Home/index.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<div class="home-container"> <div class="home-container">
<div class="home-content"> <div class="home-content">
<div class="home-title"> <div class="home-title animate-fade-in-up">
<img src="@/assets/imgs/logo.png" alt="logo"/> <img src="@/assets/imgs/logo.png" alt="logo"/>
<h1>可信开源代码库</h1> <h1>可信开源代码库</h1>
</div> </div>
<div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }"> <div class="home-search animate-fade-in-up delay-100" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
<d-input <d-input
ref="searchInput" ref="searchInput"
placeholder="请输入搜索关键字" placeholder="请输入搜索关键字"
@@ -17,9 +17,9 @@
> >
<template #prepend> <template #prepend>
<d-dropdown @toggle="onCateToggle($event)"> <d-dropdown @toggle="onCateToggle($event)">
<div class="flex items-center gap-1 cursor-pointer"> <div class="flex items-center gap-1 cursor-pointer dropdown-trigger">
{{ searchType }} {{ searchType }}
<d-icon :rotate="cateRotate" name="icon-chevron-down-2"></d-icon> <d-icon :rotate="cateRotate" name="icon-chevron-down-2" class="transition-transform"></d-icon>
</div> </div>
<template #menu> <template #menu>
<ul class="list-menu"> <ul class="list-menu">
@@ -44,8 +44,7 @@
<template #append> <template #append>
<div id="advancedSearch close-isopen" class="advanced-search" @click="openAdvancedSearch"> <div id="advancedSearch close-isopen" class="advanced-search" @click="openAdvancedSearch">
<span class="close-isopen">高级筛选</span> <span class="close-isopen">高级筛选</span>
<!-- <d-badge :count="6" :bg-color="'#f0f0f0'" class="close-isopen"></d-badge>--> <d-icon class="close-isopen transition-transform" :rotate="rotate" name="icon-chevron-down-2"></d-icon>
<d-icon class="close-isopen" :rotate="rotate" name="icon-chevron-down-2"></d-icon>
</div> </div>
</template> </template>
</d-input> </d-input>
@@ -60,15 +59,21 @@
</d-dropdown-menu> </d-dropdown-menu>
<d-button icon="search" shape="circle" @click="search"></d-button> <d-button icon="search" shape="circle" @click="search"></d-button>
</div> </div>
<div style="width: 70%" class="from-blue-50 to-white"> <div style="width: 70%" class="from-blue-50 to-white animate-fade-in-up delay-200">
<!-- 顶部功能按钮 -->
<d-row :gutter="16" class="mb-8 top-btn"> <d-row :gutter="16" class="mb-8 top-btn">
<div style="cursor: pointer" v-for="item in topButtons" :key="item.name" @click="handleButtonClick(item)"> <div
style="cursor: pointer"
v-for="(item, index) in topButtons"
:key="item.name"
@click="handleButtonClick(item)"
class="hover-lift"
:style="{ animationDelay: `${index * 100}ms` }"
>
<div style="width: 84px;height: 84px;flex-direction: column;padding: 12px;margin: 0 12px" <div style="width: 84px;height: 84px;flex-direction: column;padding: 12px;margin: 0 12px"
class="bg-white rounded-lg shadow-md flex items-center justify-center mb-2"> class="bg-white rounded-lg shadow-md flex items-center justify-center mb-2">
<div> <div>
<img style="width: 32px;height: 32px;margin-bottom: 4px" :src="item.icon" <img style="width: 32px;height: 32px;margin-bottom: 4px" :src="item.icon"
class="text-blue-600 text-xl"></img> class="text-blue-600 text-xl func-icon transition-transform"></img>
</div> </div>
<div class="text-sm font-medium">{{ item.name }}</div> <div class="text-sm font-medium">{{ item.name }}</div>
</div> </div>
@@ -77,9 +82,8 @@
<div class="dashboard-page"> <div class="dashboard-page">
<d-row :gutter="16" class="main-row"> <d-row :gutter="16" class="main-row">
<!-- 左侧：全球威胁态势实时监控 -->
<d-col :span="14"> <d-col :span="14">
<div class="bg-white rounded-xl shadow-md p-4"> <div class="bg-white rounded-xl shadow-md p-4 hover-shadow">
<div class="section-title">全球威胁态势实时监控 <div class="section-title">全球威胁态势实时监控
<a href="#" class="text-blue-600 text-sm">更多 ></a></div> <a href="#" class="text-blue-600 text-sm">更多 ></a></div>
<d-row :gutter="24" class="threat-row"> <d-row :gutter="24" class="threat-row">
@@ -91,17 +95,13 @@
</d-col> </d-col>
<d-col :span="6"> <d-col :span="6">
<div class="data-card"> <div class="data-card">
<div class="data-item"> <div class="data-item hover-scale">
<span class="data-label">今日检测量</span> <span class="data-label">今日检测量</span>
<span class="data-value">128万次</span> <span class="data-value count-up">128万次</span>
<!-- <span class="data-value">128万次</span>-->
<!-- <span class="data-desc">说明0</span>-->
</div> </div>
<div class="data-item"> <div class="data-item hover-scale">
<span class="data-label">高危威胁</span> <span class="data-label">高危威胁</span>
<span class="data-value danger">327起</span> <span class="data-value danger count-up">327起</span>
<!-- <span class="data-value danger">327起</span>-->
<!-- <span class="data-desc">说明0</span>-->
</div> </div>
</div> </div>
</d-col> </d-col>
@@ -109,18 +109,17 @@
</div> </div>
</d-col> </d-col>
<!-- 右侧：AI+安全核心能力 -->
<d-col style="height: 320px" :span="10"> <d-col style="height: 320px" :span="10">
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4"> <div style="height: 100%" class="bg-white rounded-xl shadow-md p-4 hover-shadow">
<div class="section-title">AI+安全核心能力 <div class="section-title">AI+安全核心能力
<router-link :to="{ name: 'aihome' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 > <router-link :to="{ name: 'aihome' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 >
</router-link> </router-link>
</div> </div>
<d-row :gutter="16" class="ai-capability-row"> <d-row :gutter="16" class="ai-capability-row">
<d-col :span="8" v-for="(item, index) in aiCapabilities" :key="index"> <d-col :span="8" v-for="(item, index) in aiCapabilities" :key="index">
<div class="capability-card"> <div class="capability-card hover-lift" :style="{ animationDelay: `${index * 150}ms` }">
<div class="capability-icon"> <div class="capability-icon">
<img :src="item.icon" class="text-blue-600 text-2xl"></img> <img :src="item.icon" class="text-blue-600 text-2xl transition-transform"></img>
</div> </div>
<h2 class="capability-title">{{ item.title }}</h2> <h2 class="capability-title">{{ item.title }}</h2>
<h4>{{ item.rate }}</h4> <h4>{{ item.rate }}</h4>
@@ -133,10 +132,9 @@
</d-row> </d-row>
</div> </div>
<!-- 团队与成果 + 最新动态 --> <d-row style="height: 237px" :gutter="16" class="mb-8">
<d-row style="height: 237px" :gutter="16">
<d-col style="height: 100%" :span="8"> <d-col style="height: 100%" :span="8">
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4 mb-4"> <div style="height: 100%" class="bg-white rounded-xl shadow-md p-4 mb-4 hover-shadow">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold">团队与成果</h3> <h3 class="text-lg font-bold">团队与成果</h3>
<router-link :to="{ name: 'OurTeam' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 > <router-link :to="{ name: 'OurTeam' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 >
@@ -145,22 +143,22 @@
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<h4 class="font-medium mb-2">顶尖安全团队</h4> <h4 class="font-medium mb-2">顶尖安全团队</h4>
<div class="flex gap-4 mb-3"> <div class="flex gap-4 mb-3">
<div class="flex flex-col items-center" v-for="member in teamMembers" :key="member.name"> <div class="flex flex-col items-center member-item hover-bob" v-for="(member, index) in teamMembers" :key="member.name" :style="{ animationDelay: `${index * 100}ms` }">
<img src="https://picsum.photos/id/1001/60/60" alt="团队成员" class="w-14 h-14 rounded-full mb-1"> <img src="https://picsum.photos/id/1001/60/60" alt="团队成员" class="w-14 h-14 rounded-full mb-1 member-avatar transition-transform">
<span class="text-sm font-medium">{{ member.name }}</span> <span class="text-sm font-medium">{{ member.name }}</span>
<span class="text-xs text-gray-500">{{ member.title }}</span> <span class="text-xs text-gray-500">{{ member.title }}</span>
</div> </div>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<button class="bg-blue-600 text-white text-xs px-3 py-1 rounded">国家级安全认证团队</button> <button class="bg-blue-600 text-white text-xs px-3 py-1 rounded hover-scale">国家级安全认证团队</button>
<button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded">200+专利技术</button> <button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded hover-scale">200+专利技术</button>
<button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded">200+专利技术</button> <button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded hover-scale">200+专利技术</button>
</div> </div>
</div> </div>
</div> </div>
</d-col> </d-col>
<d-col style="height: 100%" :span="16"> <d-col style="height: 100%" :span="16">
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4"> <div style="height: 100%" class="bg-white rounded-xl shadow-md p-4 hover-shadow">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold">最新动态</h3> <h3 class="text-lg font-bold">最新动态</h3>
<router-link :to="{ name: 'Insights' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 > <router-link :to="{ name: 'Insights' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 >
@@ -175,11 +173,11 @@
:time="news.year" :time="news.year"
dot-color="#ff6384" dot-color="#ff6384"
line-color="#e5e7eb" line-color="#e5e7eb"
class="timeline-item" class="timeline-item animate-fade-in-left"
:style="{ animationDelay: `${index * 150}ms` }"
> >
<!-- 时间线内容区域，保留原有样式结构 --> <div class="timeline-content hover-translate-x">
<div class="timeline-content"> <p class="font-medium transition-color">{{ news.title }}</p>
<p class="font-medium">{{ news.title }}</p>
<p class="text-xs text-gray-500">{{ news.desc }}</p> <p class="text-xs text-gray-500">{{ news.desc }}</p>
</div> </div>
</d-timeline-item> </d-timeline-item>
@@ -189,54 +187,6 @@
</d-col> </d-col>
</d-row> </d-row>
</div> </div>
<!-- <d-button v-if="isLogin" @click="check" ref="origin" icon="share" class="batch-btn">批量检索</d-button>-->
<!-- <div class="home-information" v-if="infoList.length > 0">-->
<!-- <div class="info-title">-->
<!-- <div class="sub-title">-->
<!-- <img src="@/assets/imgs/home/informIcon@2x.png" />-->
<!-- <span>预警公告</span>-->
<!-- </div>-->
<!-- &lt;!&ndash; <a v-if="accountInfo.op_access_token" class="devui-link" @click="checkMore"-->
<!-- >更多 <i class="icon icon-chevron-right-2"></i>-->
<!-- </a>-->
<!-- <span v-else class="text-blue-500">查看更多，请先登录</span> &ndash;&gt;-->
<!-- </div>-->
<!-- <div class="info-content">-->
<!-- <d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">-->
<!-- <d-timeline-item-->
<!-- v-for="(item, index) in infoList"-->
<!-- :key="index"-->
<!-- :dot-color="item.dotColor"-->
<!-- :line-color="'var(&#45;&#45;devui-form-control-line-hover)'"-->
<!-- >-->
<!-- <template #default>-->
<!-- <div class="flex items-center justify-between w-full">-->
<!-- <div-->
<!-- class="cursor-pointer notice-content flex gap-2 items-center"-->
<!-- @click="openWarningDetail(item, index)"-->
<!-- >-->
<!-- <span>{{ item.subject }}</span>-->
<!-- <d-tag-->
<!-- v-if="item.importance && tagMap[item.importance]"-->
<!-- :color="tagMap[item.importance].color"-->
<!-- size="sm"-->
<!-- >{{ tagMap[item.importance].text }}</d-tag-->
<!-- >-->
<!-- </div>-->
<!-- <div class="time-container">-->
<!-- <d-icon name="icon-time"></d-icon>-->
<!-- {{ item.publishTime }}-->
<!-- </div>-->
<!-- </div>-->
<!-- </template>-->
<!-- <template #time>-->
<!-- <span></span>-->
<!-- </template>-->
<!-- </d-timeline-item>-->
<!-- </d-timeline>-->
<!-- </div>-->
<!-- </div>-->
</div> </div>
</div> </div>
@@ -246,6 +196,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// 保持原有的逻辑和数据定义
import {ref, onMounted, onBeforeUnmount, computed} from 'vue'; import {ref, onMounted, onBeforeUnmount, computed} from 'vue';
import {useRoute, useRouter} from 'vue-router'; import {useRoute, useRouter} from 'vue-router';
import {useAccount} from '@/utils/hooks/useAccount'; import {useAccount} from '@/utils/hooks/useAccount';
@@ -253,13 +204,11 @@ import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
import {getHomeNoticeList} from '@/api/jyh'; import {getHomeNoticeList} from '@/api/jyh';
import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue'; import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
import {useGlobalInfoStore} from '@/stores/Global'; import {useGlobalInfoStore} from '@/stores/Global';
const {updateHeaderSearch} = useGlobalInfoStore();
const {accountInfo} = useAccount();
import {useDiscussGetUserInfo} from '@/api/discussion/hook'; import {useDiscussGetUserInfo} from '@/api/discussion/hook';
import {DChart} from 'vue-devui/echarts'; import {DChart} from 'vue-devui/echarts';
import {reactive} from 'vue'; import {reactive} from 'vue';
// --- Echarts Options (保持不变) ---
const lineOption = reactive({ const lineOption = reactive({
tooltip: {show: true, trigger: 'axis'}, tooltip: {show: true, trigger: 'axis'},
grid: { grid: {
@@ -305,6 +254,15 @@ const lineOption = reactive({
const pieOption = reactive({ const pieOption = reactive({
tooltip: {show: true, trigger: 'item'}, tooltip: {show: true, trigger: 'item'},
legend: {
icon: "rect",
itemHeight: 13,
itemWidth: 13,
itemGap: 10,
top: '0%',
left: '0%',
right: '0%',
},
series: [ series: [
{ {
title: '态势感知', title: '态势感知',
@@ -325,22 +283,18 @@ const pieOption = reactive({
], ],
}); });
// --- Data & State (保持不变) ---
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const inputGlow = ref(false); const inputGlow = ref(false);
const searchStr = ref(''); const searchStr = ref('');
const position = ref(['right-start', 'right-end']); const position = ref(['right-start', 'right-end']);
const industryOptions = ref(['通信', '军工', '金融', '能源']);
const searchType = ref('软件'); const searchType = ref('软件');
const searchOptions = ref(['软件']);
const offset = ref({mainAxis: 7, crossAxis: -10}); const offset = ref({mainAxis: 7, crossAxis: -10});
const isKeepOpen = ref(true);
const isOpen = ref(false); const isOpen = ref(false);
const cateRotate = ref(0); const cateRotate = ref(0);
const infoList = ref([]);
const warningModalVisable = ref(false); const warningModalVisable = ref(false);
const currentWarning = ref(); const currentWarning = ref();
const {isLogin} = useDiscussGetUserInfo(); const {isLogin} = useDiscussGetUserInfo();
const homeSearch = ref(null); const homeSearch = ref(null);
const dropdownWidth = ref(0); const dropdownWidth = ref(0);
@@ -350,7 +304,7 @@ import aqqb from '@/assets/imgs/jyh/menu/许可证检测.png'
import aqjc from '@/assets/imgs/jyh/menu/已知漏洞检测.png' import aqjc from '@/assets/imgs/jyh/menu/已知漏洞检测.png'
import aqzk from '@/assets/imgs/jyh/menu/可信治理.png' import aqzk from '@/assets/imgs/jyh/menu/可信治理.png'
import kxrj from '@/assets/imgs/jyh/menu/可信软件.png' import kxrj from '@/assets/imgs/jyh/menu/可信软件.png'
// 顶部功能按钮数据 // 顶部功能按钮数据 (保持不变)
const topButtons = ref([ const topButtons = ref([
{name: '安全智库', icon: aqzk}, {name: '安全智库', icon: aqzk},
{name: '安全检测', icon: aqjc}, {name: '安全检测', icon: aqjc},
@@ -359,26 +313,22 @@ const topButtons = ref([
{name: '智能引擎', icon: kxrj}, {name: '智能引擎', icon: kxrj},
]); ]);
// 按钮点击事件处理 // 按钮点击事件处理 (保持不变)
const handleButtonClick = (item) => { const handleButtonClick = (item) => {
// 路由映射关系：按钮名称 -> 对应路由name或新页面地址
const routeMap = { const routeMap = {
'安全智库': 'Search', // 对应name: 'Search'的路由 '安全智库': 'Search',
'安全检测': 'TestingCenter', // 对应name: 'TestingCenter'的路由 '安全检测': 'TestingCenter',
'安全情报': 'Insights', // 对应name: 'Insights'的路由 '安全情报': 'Insights',
'智能引擎': 'aihome', // 对应name: 'aihome'的路由 '智能引擎': 'aihome',
'安全态势': 'http://222.20.126.217:10010/bigScreen/#/kxky' // 安全态势大屏地址（替换为实际地址） '安全态势': 'https://example.com/security-situation'
}; };
const target = routeMap[item.name]; const target = routeMap[item.name];
if (!target) return; if (!target) return;
// 区分路由跳转和新页面打开
if (item.name === '安全态势') { if (item.name === '安全态势') {
// 安全态势：打开新页面
window.open(target, '_blank'); window.open(target, '_blank');
} else { } else {
// 其他按钮：路由跳转
router.push({name: target}); router.push({name: target});
} }
}; };
@@ -386,7 +336,7 @@ const handleButtonClick = (item) => {
import znjc from '@/assets/imgs/jyh/menu/AI大模型能力.png' import znjc from '@/assets/imgs/jyh/menu/AI大模型能力.png'
import aiLogo1 from '@/assets/imgs/jyh/ai/aiLogo1.png' import aiLogo1 from '@/assets/imgs/jyh/ai/aiLogo1.png'
import vulnerabilityForewarning from '@/assets/imgs/jyh/menu/vulnerabilityForewarning.png' import vulnerabilityForewarning from '@/assets/imgs/jyh/menu/vulnerabilityForewarning.png'
// AI+安全核心能力数据 // AI+安全核心能力数据 (保持不变)
const aiCapabilities = ref([ const aiCapabilities = ref([
{ {
title: '智能检测引擎', title: '智能检测引擎',
@@ -408,72 +358,31 @@ const aiCapabilities = ref([
}, },
]); ]);
// 团队成员数据 // 团队成员数据 (保持不变)
const teamMembers = ref([ const teamMembers = ref([
{name: '主理', title: '安全专家/负责人'}, {name: '主理', title: '安全专家/负责人'},
{name: '顾问', title: '企业安全专家'}, {name: '顾问', title: '企业安全专家'},
{name: '架构', title: '技术架构专家'}, {name: '架构', title: '技术架构专家'},
]); ]);
// 最新动态数据 // 最新动态数据 (保持不变)
const latestNews = ref([ const latestNews = ref([
{year: '2024', title: '中国头安全实验室等合作的智能决策模型授奖', desc: '智能决策模型在多领域安全决策中表现卓越，获行业权威奖项。', more: true}, {year: '2024', title: '中国头安全实验室等合作的智能决策模型授奖', desc: '智能决策模型在多领域安全决策中表现卓越，获行业权威奖项。', more: true},
{year: '2023', title: '智能检测引擎从一定论到再超越的与证明', desc: '2024年深度优化检测，在极端场景中达99.9%准确率，性能、智能、召回率再升级。', more: false}, {year: '2023', title: '智能检测引擎从一定论到再超越的与证明', desc: '2024年深度优化检测，在极端场景中达99.9%准确率，性能、智能、召回率再升级。', more: false},
{year: '2023', title: '新闻网常务委员：邻区区委交换稿与证明', desc: '网络空间安全会议上，邻区、外防负责人、专家会首席等共论，包含新成果实证。', more: false}, {year: '2023', title: '新闻网常务委员：邻区区委交换稿与证明', desc: '网络空间安全会议上，邻区、外防负责人、专家会首席等共论，包含新成果实证。', more: false},
]); ]);
const tagMap = {
critical: {
text: '致命',
color: '#c7000b'
},
high: {
text: '高',
color: '#f66f6a'
},
medium: {
text: '中',
color: '#fac20a'
},
low: {
text: '低',
color: '#5e7ce0'
},
Critical: {
text: '致命',
color: '#c7000b'
},
High: {
text: '高',
color: '#f66f6a'
},
Medium: {
text: '中',
color: '#fac20a'
},
Low: {
text: '低',
color: '#5e7ce0'
}
};
const rotate = computed(() => { const rotate = computed(() => {
return isOpen.value ? 180 : 0; return isOpen.value ? 180 : 0;
}); });
// --- Methods (保持不变) ---
const searchInput = ref(null); const searchInput = ref(null);
const openAdvancedSearch = () => { const openAdvancedSearch = () => {
isOpen.value = !isOpen.value; isOpen.value = !isOpen.value;
inputGlow.value = isOpen.value; inputGlow.value = isOpen.value;
}; };
const check = () => {
router.push({
name: 'Search',
query: {tab: 'BatchVerify'} // 通过查询参数指定 Tab
});
};
const closeOutside = () => { const closeOutside = () => {
return false; return false;
}; };
@@ -514,11 +423,10 @@ const globalInfo = useGlobalInfoStore();
const industryList = globalInfo.industryList; const industryList = globalInfo.industryList;
const getIndustryValue = (name) => { const getIndustryValue = (name) => {
const industry = industryList.find((item) => item.name === name); const industry = industryList.find((item) => item.name === name);
return industry ? industry.value : ''; // 如果找不到，返回默认值 return industry ? industry.value : '';
}; };
const search = () => { const search = () => {
// updateHeaderSearch({ searchWord: searchStr.value, searchType: selectedCate.value });
router.push({ router.push({
name: 'Search', name: 'Search',
query: { query: {
@@ -526,35 +434,17 @@ const search = () => {
searchType: getIndustryValue(searchType.value) searchType: getIndustryValue(searchType.value)
} }
}); });
// window.open(`${import.meta.env.VITE_BASE_URL}repoList?softwareName=${searchStr.value ? searchStr.value : ''}&searchType=${getIndustryValue(searchType.value)}`, '_blank')
}; };
const onCategoryChange = (event) => { const onCategoryChange = (event) => {
searchType.value = event?.name || '软件'; searchType.value = event?.name || '软件';
globalInfo.updateHeaderSearch({softwareName: softwareName.value, searchType: event.value}); globalInfo.updateHeaderSearch({softwareName: searchStr.value, searchType: event.value});
}; };
const onCateToggle = (event) => { const onCateToggle = (event) => {
cateRotate.value = event ? 180 : 0; cateRotate.value = event ? 180 : 0;
}; };
const checkMore = () => {
router.push({name: 'PersonalCenter'});
};
const openWarningDetail = (event, index) => {
infoList.value.forEach((item, i) => {
if (i <= index) {
item.dotColor = 'var(--devui-info)';
} else {
item.dotColor = '';
}
});
warningModalVisable.value = true;
currentWarning.value = event;
};
let resizeObserver: ResizeObserver | null = null; let resizeObserver: ResizeObserver | null = null;
onMounted(() => { onMounted(() => {
@@ -567,10 +457,13 @@ onMounted(() => {
document.querySelector('body').onclick = (e) => { document.querySelector('body').onclick = (e) => {
const className = e.target.className; const className = e.target.className;
// 优化点击外部关闭逻辑，兼容SVG图标
if ( if (
!className.includes('close-isopen') && !className.includes ||
(!className.includes('close-isopen') &&
!className.includes('devui-badge__content') && !className.includes('devui-badge__content') &&
!className.includes('advanced-search') !className.includes('advanced-search') &&
e.target.tagName !== 'svg' && e.target.tagName !== 'path')
) { ) {
isOpen.value = false; isOpen.value = false;
} }
@@ -582,20 +475,116 @@ onBeforeUnmount(() => {
resizeObserver.unobserve(homeSearch.value); resizeObserver.unobserve(homeSearch.value);
} }
}); });
const getNoticeList = async () => {
const res: any = await getHomeNoticeList();
if (!res.error) {
infoList.value = res.data.data || [];
}
};
getNoticeList();
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss'; @import 'devui-theme/styles-var/devui-var.scss';
// ----------------------------------------------------
// 通用样式与动画
// ----------------------------------------------------
$shadow-base: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
$primary-color: #5e7ce0;
.transition-transform {
transition: transform 0.3s ease;
}
.transition-color {
transition: color 0.3s ease;
}
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover {
transform: translateY(-6px);
//box-shadow: $shadow-hover !important;
}
}
.hover-scale {
transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15) !important;
}
}
.hover-shadow {
transition: box-shadow 0.3s ease;
&:hover {
box-shadow: $shadow-hover !important;
}
}
.hover-bob {
transition: transform 0.3s ease;
&:hover {
transform: translateY(-4px);
}
}
.hover-translate-x {
transition: transform 0.3s ease;
&:hover {
transform: translateX(6px);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate-fade-in-left {
animation: fadeInLeft 0.6s ease-out forwards;
opacity: 0; // 初始不可见
}
@keyframes countUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.count-up {
display: inline-block;
animation: countUp 0.8s ease-out forwards;
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
// ----------------------------------------------------
// 基础样式 (保持不变)
// ----------------------------------------------------
.home-container { .home-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -629,7 +618,6 @@ getNoticeList();
img { img {
width: 50px; width: 50px;
//filter: brightness(0);
} }
} }
@@ -639,17 +627,18 @@ getNoticeList();
border: 1px solid #dfe1e5; border: 1px solid #dfe1e5;
box-shadow: 0px 2px 8px 0px rgba(60, 64, 67, 0.25); box-shadow: 0px 2px 8px 0px rgba(60, 64, 67, 0.25);
border-radius: 24px; border-radius: 24px;
//width: 100%;
//height: 40px;
flex-shrink: 0; flex-shrink: 0;
background-color: white; background-color: white;
//border-radius: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 12px; padding: 12px;
//box-shadow: var(--devui-shadow, 0 2px 12px 0); transition: all 0.3s ease; // 添加过渡
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
input { input {
border: none; border: none;
outline: none; outline: none;
@@ -657,12 +646,24 @@ getNoticeList();
font-size: 14px; font-size: 14px;
} }
.dropdown-trigger {
transition: color 0.3s ease;
&:hover {
color: $primary-color;
}
}
.advanced-search { .advanced-search {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
transition: color 0.3s ease; // 添加过渡
&:hover {
color: $primary-color;
}
&::before { &::before {
content: ''; content: '';
@@ -681,59 +682,154 @@ getNoticeList();
padding: 12px; padding: 12px;
background-color: white; background-color: white;
} }
}
}
}
.form-operation { .glow-border {
border: 1px solid var(--devui-form-control-line, #d7d8da);
border-color: var(--devui-form-control-line-active, #5e7ce0) !important;
box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.15)); // 调整光晕颜色透明度
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
// 卡片通用样式
.bg-white {
border-radius: 8px;
box-shadow: $shadow-base;
transition: box-shadow 0.3s ease; // 添加过渡
}
// 顶部功能按钮
.top-btn {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 8px;
.func-icon {
transition: transform 0.3s ease;
}
&:hover .func-icon {
transform: scale(1.1);
} }
} }
.batch-btn {
color: $devui-aide-text; // 威胁监控卡片
width: 150px; .data-card {
flex-shrink: 0; .data-item {
background-color: #f0f0f0; margin-bottom: 24px;
border-color: $devui-aide-text; background: #f1f5fc;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
.data-label {
font-size: 14px;
color: #606266;
display: block;
margin-bottom: 8px;
} }
.home-information { .data-value {
width: 100%; font-size: 24px;
background-color: #f0f0f0; font-weight: 600;
//overflow: auto; color: #303133;
margin-bottom: 20px; margin-right: 16px;
}
.data-value.danger {
color: #f56c6c;
}
}
}
$primary-light: #e8f0fe;
// AI能力卡片
.ai-capability-row {
.capability-card {
height: 100%;
background: white;
border-radius: 10px; border-radius: 10px;
padding: 12px; padding: 18px 12px;
border: 1px solid #e9ecef;
.info-title { text-align: center;
img { transition: all 0.3s ease;
width: 20px;
}
display: flex; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
.sub-title { &:hover {
border-color: #b8daff;
background: $primary-light;
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(66, 133, 244, 0.1);
}
.capability-icon {
text-align: center;
margin-bottom: 12px;
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
border-radius: 12px;
background-color: rgba(66, 133, 244, 0.1);
display: flex; display: flex;
gap: 8px; align-items: center;
justify-content: center;
img {
display: inline-block;
width: 28px;
}
} }
margin-bottom: 20px; &:hover .capability-icon img {
margin-left: 10px; transform: scale(1.15);
} }
:deep(.devui-timeline-item-data-left) { .capability-title {
display: none; font-size: 16px;
font-weight: 600;
color: #202124;
margin-bottom: 6px;
} }
:deep(.devui-timeline-item-dot) { h4 {
scale: 0.7; font-size: 12px;
color: $primary-color;
margin: 0 0 10px 0;
font-weight: 500;
} }
.capability-desc {
font-size: 13px;
color: #5f6368;
line-height: 1.5;
} }
} }
} }
// 团队成员卡片
.member-item {
&:hover .member-avatar {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
}
// 最新动态
.timeline-content {
margin-top: 4px;
cursor: pointer;
&:hover .font-medium {
color: $primary-color;
}
}
// 其他样式保持不变...
.home-search { .home-search {
:deep(.devui-input-slot__prepend), :deep(.devui-input-slot__prepend),
:deep(.devui-input-slot__append), :deep(.devui-input-slot__append),
@@ -747,13 +843,6 @@ getNoticeList();
} }
} }
.glow-border {
border: 1px solid var(--devui-form-control-line, #d7d8da);
border-color: var(--devui-form-control-line-active, #5e7ce0) !important;
box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.08));
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.menu-item { .menu-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -804,18 +893,6 @@ getNoticeList();
width: 80%; width: 80%;
} }
// 页面容器基础样式
.bg-gradient-to-b {
background-size: cover;
background-repeat: no-repeat;
}
// 卡片通用样式
.bg-white {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
// 文本样式 // 文本样式
.text-lg { .text-lg {
font-size: 18px; font-size: 18px;
@@ -859,17 +936,6 @@ getNoticeList();
} }
.dashboard-page { .dashboard-page {
//padding: 20px;
////background: #fff;
//border-radius: 8px;
//box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
.chart-card {
padding: 20px;
//background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.section-title { .section-title {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
@@ -882,104 +948,20 @@ getNoticeList();
a { a {
font-weight: 400; font-weight: 400;
} }
.more-link {
font-size: 14px;
color: #409eff;
text-decoration: none;
}
} }
.main-row { .main-row {
margin-bottom: 20px; margin-bottom: 20px;
} }
.data-card {
//background: #fff;
//border-radius: 8px;
//padding: 16px;
//box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
.data-item {
margin-bottom: 24px;
background: #f1f5fc;
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
.data-label {
font-size: 14px;
color: #606266;
display: block;
margin-bottom: 8px;
}
.data-value {
font-size: 24px;
font-weight: 600;
color: #303133;
margin-right: 16px;
}
.data-value.danger {
color: #f56c6c;
}
.data-desc {
font-size: 12px;
color: #909399;
float: right;
}
}
}
.ai-capability-row { .ai-capability-row {
height: calc(100% - 46px); height: calc(100% - 46px);
.devui-col { .devui-col {
height: 100%; height: 100%;
} }
.capability-card {
height: 100%;
background: #f3f7f8;
border-radius: 8px;
padding: 12px;
border: 1px solid #323a4e;
text-align: center;
.capability-icon {
text-align: center;
margin-bottom: 12px;
img {
display: inline-block;
width: 32px;
} }
} }
.capability-title {
font-size: 16px;
font-weight: 500;
color: #303133;
margin-bottom: 8px;
}
.capability-desc {
font-size: 14px;
color: #606266;
line-height: 1.5;
}
}
}
}
.top-btn {
display: flex;
justify-content: center;
align-items: center;
}
/* 时间线样式调整，保持与原有布局一致 */ /* 时间线样式调整，保持与原有布局一致 */
:deep(.devui-timeline) { :deep(.devui-timeline) {
--devui-timeline-item-padding: 0 0 24px 0; /* 调整项间距 */ --devui-timeline-item-padding: 0 0 24px 0; /* 调整项间距 */
@@ -999,18 +981,4 @@ getNoticeList();
:deep(.devui-timeline-item-data-left) { :deep(.devui-timeline-item-data-left) {
flex: none; flex: none;
} }
.timeline-content {
margin-top: 4px; /* 与时间标签保持距离 */
}
.font-medium {
font-weight: 500;
margin-bottom: 4px; /* 标题与描述间距 */
}
.text-xs {
font-size: 12px;
line-height: 1.5; /* 描述文字行高 */
}
</style> </style>