态势感知平台-增加武汉鸿蒙项目榜单
This commit is contained in:
fmk1023
@@ -11,7 +11,8 @@
|
||||
<div class="flex justify-center pb-2">
|
||||
<div class="language-tab">
|
||||
<span :class="{ active: activeTab === 0 }" @click="switchTab(0)">鸿蒙项目城市分布</span>
|
||||
<span :class="{ active: activeTab === 1 }" @click="switchTab(1)">鸿蒙优秀开源项目</span>
|
||||
<span :class="{ active: activeTab === 1 }" @click="switchTab(1)">鸿蒙开源项目</span>
|
||||
<span :class="{ active: activeTab === 2 }" @click="switchTab(2)">武汉鸿蒙项目</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,12 +25,41 @@
|
||||
@mouseenter="pauseScroll('hmProject')"
|
||||
@mouseleave="resumeScroll('hmProject')">
|
||||
<div class="project-list">
|
||||
<div class="project-item" v-for="(item, index) in [...hmProjects, ...hmProjects]" :key="index">
|
||||
<div class="project-item" v-for="(item, index) in [...hmProjects, ...hmProjects]" :key="'hm-'+index">
|
||||
<div class="project-rank-wrapper">
|
||||
<span class="project-rank">{{ (index % hmProjects.length) + 1 }}</span>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<span class="project-name">{{ item.name }}</span>
|
||||
<div class="dev-name-row">
|
||||
<span class="project-name">{{ item.name }}</span>
|
||||
<span class="project-company-tag" v-if="item.company">{{ item.company }}</span>
|
||||
</div>
|
||||
<span class="project-desc">{{ item.desc }}</span>
|
||||
</div>
|
||||
<div class="project-meta">
|
||||
<span class="project-stars">★ {{ item.stars }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 2"
|
||||
class="chartCard__container list-container"
|
||||
ref="scrollContainerWhProject"
|
||||
@mouseenter="pauseScroll('whProject')"
|
||||
@mouseleave="resumeScroll('whProject')">
|
||||
<div class="project-list">
|
||||
<div class="project-item" v-for="(item, index) in [...whProjects, ...whProjects]" :key="'wh-'+index">
|
||||
<div class="project-rank-wrapper">
|
||||
<span class="project-rank" :class="{'top-three': (index % whProjects.length) < 3}">
|
||||
{{ (index % whProjects.length) + 1 }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<div class="dev-name-row">
|
||||
<span class="project-name">{{ item.name }}</span>
|
||||
<span class="project-company-tag" v-if="item.company">{{ item.company }}</span>
|
||||
</div>
|
||||
<span class="project-desc">{{ item.desc }}</span>
|
||||
</div>
|
||||
<div class="project-meta">
|
||||
@@ -41,15 +71,6 @@
|
||||
</div>
|
||||
|
||||
<div class="source-footer">
|
||||
<span class="source-label">数据来源：</span>
|
||||
<div class="source-content">
|
||||
<svg class="source-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.128 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
|
||||
fill="#333" />
|
||||
</svg>
|
||||
<span class="source-name">Gitee / GitHub</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -284,16 +305,29 @@ const hmEnterpriseCityData = [
|
||||
];
|
||||
|
||||
const hmProjects = [
|
||||
{ name: 'OpenHarmony', desc: '开源鸿蒙操作系统核心项目', stars: '50k+' },
|
||||
{ name: 'HarmonyOS Developer Tools', desc: '鸿蒙开发工具集', stars: '15k+' },
|
||||
{ name: 'HarmonyOS Application Framework', desc: '鸿蒙应用框架', stars: '12k+' },
|
||||
{ name: 'HarmonyOS Distributed Hardware', desc: '分布式硬件管理', stars: '10k+' },
|
||||
{ name: 'HarmonyOS Security Framework', desc: '鸿蒙安全框架', stars: '9k+' },
|
||||
{ name: 'HarmonyOS AI Framework', desc: '鸿蒙AI框架', stars: '8.5k+' },
|
||||
{ name: 'HarmonyOS Graphics Framework', desc: '鸿蒙图形框架', stars: '8k+' },
|
||||
{ name: 'HarmonyOS Multimedia Framework', desc: '鸿蒙多媒体框架', stars: '7.5k+' },
|
||||
{ name: 'HarmonyOS Kernel LiteOS-M', desc: '轻量级内核', stars: '7k+' },
|
||||
{ name: 'HarmonyOS Kernel Linux', desc: 'Linux内核适配', stars: '6.5k+' }
|
||||
{ name: 'OpenHarmony', desc: '开源鸿蒙操作系统核心项目', stars: '50k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Developer Tools', desc: '鸿蒙开发工具集', stars: '15k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Application Framework', desc: '鸿蒙应用框架', stars: '12k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Distributed Hardware', desc: '分布式硬件管理', stars: '10k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Security Framework', desc: '鸿蒙安全框架', stars: '9k+' , company: '华为'},
|
||||
{ name: 'HarmonyOS AI Framework', desc: '鸿蒙AI框架', stars: '8.5k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Graphics Framework', desc: '鸿蒙图形框架', stars: '8k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Multimedia Framework', desc: '鸿蒙多媒体框架', stars: '7.5k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Kernel LiteOS-M', desc: '轻量级内核', stars: '7k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Kernel Linux', desc: 'Linux内核适配', stars: '6.5k+', company: '华为' }
|
||||
];
|
||||
|
||||
const whProjects = [
|
||||
{ name: 'OpenHarmony', desc: '开源鸿蒙操作系统核心项目', stars: '50k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Developer Tools', desc: '鸿蒙开发工具集', stars: '15k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Application Framework', desc: '鸿蒙应用框架', stars: '12k+' , company: '华为'},
|
||||
{ name: 'HarmonyOS Distributed Hardware', desc: '分布式硬件管理', stars: '10k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Security Framework', desc: '鸿蒙安全框架', stars: '9k+', company: '华为' },
|
||||
{ name: 'HarmonyOS AI Framework', desc: '鸿蒙AI框架', stars: '8.5k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Graphics Framework', desc: '鸿蒙图形框架', stars: '8k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Multimedia Framework', desc: '鸿蒙多媒体框架', stars: '7.5k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Kernel LiteOS-M', desc: '轻量级内核', stars: '7k+', company: '华为' },
|
||||
{ name: 'HarmonyOS Kernel Linux', desc: 'Linux内核适配', stars: '6.5k+', company: '华为' }
|
||||
];
|
||||
|
||||
const hmDevelopers = [
|
||||
@@ -544,10 +578,12 @@ const scrollContainerHmProject = ref<HTMLDivElement | null>(null);
|
||||
const scrollContainerHmDev = ref<HTMLDivElement | null>(null);
|
||||
const scrollTimers: { [key: string]: NodeJS.Timeout | null } = { hmProject: null, hmDev: null };
|
||||
const scrollContainerHmEnt = ref<HTMLDivElement | null>(null);
|
||||
const scrollContainerWhProject = ref<HTMLDivElement | null>(null);
|
||||
|
||||
const autoScroll = (key: string) => {
|
||||
let container;
|
||||
if (key === 'hmProject') container = scrollContainerHmProject.value;
|
||||
else if (key === 'whProject') container = scrollContainerWhProject.value;
|
||||
else if (key === 'hmDev') container = scrollContainerHmDev.value;
|
||||
else if (key === 'hmEnt') container = scrollContainerHmEnt.value;
|
||||
else if (key === 'uni') container = scrollContainerUni.value;
|
||||
@@ -786,6 +822,7 @@ onMounted(() => {
|
||||
autoScroll('hmProject');
|
||||
autoScroll('hmDev');
|
||||
autoScroll('hmEnt');
|
||||
autoScroll('whProject');
|
||||
initUniCityChart(); // 初始化高校分布图
|
||||
autoScroll('uni'); // 启动高校列表滚动
|
||||
window.addEventListener('resize', handleResize);
|
||||
@@ -932,6 +969,25 @@ onUnmounted(() => {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 企业标签样式 */
|
||||
.project-company-tag {
|
||||
font-size: 11px;
|
||||
padding: 0px 6px;
|
||||
background-color: #f1f5f9;
|
||||
color: #64748b;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e2e8f0;
|
||||
white-space: nowrap;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* 针对 Top 3 项目的企业标签可以加深一点颜色（可选） */
|
||||
.project-item:nth-child(-n+3) .project-company-tag {
|
||||
background-color: #eff6ff;
|
||||
color: #3b82f6;
|
||||
border-color: #dbeafe;
|
||||
}
|
||||
|
||||
.project-desc {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
@@ -1052,7 +1108,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.language-tab span {
|
||||
padding: 0.45rem 1.2rem;
|
||||
padding: 0.45rem 1rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -2,7 +2,11 @@
|
||||
<div class="stats-glass-bar">
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">1000W+</span>
|
||||
<span class="stat-desc">鸿蒙开发者</span>
|
||||
<span class="stat-desc">全国鸿蒙认证开发者</span>
|
||||
</div>
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">1W+</span>
|
||||
<span class="stat-desc">武汉鸿蒙认证开发者</span>
|
||||
</div>
|
||||
<div class="stat-separator"></div>
|
||||
<div class="stat-node">
|
||||
|
||||
Reference in New Issue
Block a user