1175 lines
43 KiB
Vue
1175 lines
43 KiB
Vue
<template>
|
||
<div class="index-module__NV_5cW__container">
|
||
<div class="index-module__NV_5cW__header">
|
||
<div class="index-module__NV_5cW__titleSection">
|
||
<div class="text-center max-w-4xl mx-auto header-content">
|
||
<div class="flex items-center justify-center mb-4 header-title-row">
|
||
<div class="title-decoration left"></div>
|
||
<h2 class="main-title">
|
||
开源 · 武汉
|
||
</h2>
|
||
<div class="title-decoration right"></div>
|
||
</div>
|
||
<p class="sub-title">
|
||
汇聚武汉开源力量，共建城市开源生态
|
||
</p>
|
||
</div>
|
||
<StatsBar />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__content">
|
||
<div class="index-module__NV_5cW__chartsSection">
|
||
<div class="index-module__NV_5cW__sectionHeader">
|
||
<h2 class="index-module__NV_5cW__sectionTitle">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||
class="lucide lucide-activity" aria-hidden="true">
|
||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
||
</svg>
|
||
<span>武汉开源生态数据可视化</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__chartsGrid">
|
||
|
||
<div class="index-module__NV_5cW__chartCard list-card">
|
||
<h3 class="chartCard__title">武汉开源项目列表</h3>
|
||
<div class="chartCard__container list-container"
|
||
ref="scrollContainer1"
|
||
@mouseenter="pauseScroll(1)"
|
||
@mouseleave="resumeScroll(1)">
|
||
<div class="project-list">
|
||
<div class="project-item" v-for="(item, index) in githubProjects" :key="index">
|
||
<div class="project-rank-wrapper">
|
||
<span class="project-rank">{{ index + 1 }}</span>
|
||
</div>
|
||
<div class="project-info">
|
||
<span class="project-name">{{ item.name }}</span>
|
||
<span class="project-desc">{{ item.desc }}</span>
|
||
</div>
|
||
<div class="project-meta">
|
||
<span class="project-stars">★ {{ item.stars }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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">GitHub</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__chartCard">
|
||
<h3 class="chartCard__title">中国城市开源项目数量对比</h3>
|
||
<div class="chartCard__container">
|
||
<div v-if="isEmpty.cityProject" class="num-empty"></div>
|
||
<div v-else id="cityProjectChart" class="chart"></div>
|
||
</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">GitHub</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__chartCard list-card">
|
||
<div class="flex justify-center pb-2">
|
||
<div class="language-tab" @click="switchTab">
|
||
<span :class="{ active: activeTab === 0 }">开源创新联盟优秀项目</span>
|
||
<span :class="{ active: activeTab === 1 }">武汉优秀开源项目</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chartCard__container list-container"
|
||
ref="scrollContainer2"
|
||
@mouseenter="pauseScroll(2)"
|
||
@mouseleave="resumeScroll(2)">
|
||
<div class="project-list">
|
||
<div class="project-item" v-for="(item, index) in currentProjectList" :key="index">
|
||
<div class="project-rank-wrapper">
|
||
<span class="project-rank" :class="{'rank-new': activeTab === 1}">{{ index + 1 }}</span>
|
||
</div>
|
||
<div class="project-info">
|
||
<span class="project-name">{{ item.name }}</span>
|
||
<span class="project-desc">{{ item.desc }}</span>
|
||
</div>
|
||
<span class="project-org-tag">{{ item.org }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="source-footer">
|
||
<span class="source-label">数据来源：</span>
|
||
<div class="source-content">
|
||
<div class="source-logo-text">Gov</div>
|
||
<span class="source-name">武汉市经信局/软件协会</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__chartCard">
|
||
<h3 class="chartCard__title">城市开源人才数量对比</h3>
|
||
<div class="chartCard__container">
|
||
<div v-if="isEmpty.talent" class="num-empty"></div>
|
||
<div v-else id="talentChart" class="chart"></div>
|
||
</div>
|
||
<div class="source-footer">
|
||
<span class="source-label">数据来源：</span>
|
||
<div class="source-content">
|
||
<img src="@/assets/imgs/logo/gitcode-ico.png" class="source-logo-circle" />
|
||
<span class="source-name">GitCode</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__chartCard list-card">
|
||
<h3 class="chartCard__title">武汉明星开发者贡献榜</h3>
|
||
<div class="chartCard__container list-container"
|
||
ref="developerScrollRef"
|
||
@mouseenter="pauseDeveloperScroll"
|
||
@mouseleave="resumeDeveloperScroll">
|
||
<div class="developer-list">
|
||
<div class="developer-item" v-for="(name, index) in developerNames" :key="index">
|
||
<!-- <div class="dev-rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>-->
|
||
|
||
<div class="dev-avatar" :style="{ background: getAvatarBg(index) }">
|
||
{{ name.charAt(0) }}
|
||
</div>
|
||
|
||
<div class="dev-info">
|
||
<div class="dev-name">{{ name }}</div>
|
||
<div class="dev-tag">核心贡献者</div>
|
||
</div>
|
||
|
||
<div class="dev-medal">
|
||
<svg v-if="index < 3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#f59e0b" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
|
||
<span v-else class="dev-score">活跃</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="source-footer">
|
||
<span class="source-label">数据来源：</span>
|
||
<div class="source-content">
|
||
<img src="@/assets/imgs/logo/penguin_blue.svg" class="source-logo-circle" />
|
||
<span class="source-name">华科开放原子俱乐部</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__chartCard">
|
||
<div class="flex justify-center pb-2">
|
||
<div class="language-tab" @click="switchCommunityTab">
|
||
<span :class="{ active: activeCommunityTab === 0 }">城市社区数量排行</span>
|
||
<span :class="{ active: activeCommunityTab === 1 }">武汉知名开源社区</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chartCard__container">
|
||
<div v-if="activeCommunityTab === 0" id="communityRankChart" class="chart"></div>
|
||
|
||
<div v-else class="list-container"
|
||
ref="communityScrollRef"
|
||
@mouseenter="pauseCommunityScroll"
|
||
@mouseleave="resumeCommunityScroll">
|
||
<div class="community-scroll-list">
|
||
<div class="community-item" v-for="(item, index) in wuhanCommunities" :key="index">
|
||
<div class="community-logo">
|
||
{{ item.name.charAt(0) }}
|
||
</div>
|
||
<div class="community-info">
|
||
<div class="community-top">
|
||
<span class="community-name">{{ item.name }}</span>
|
||
<span class="community-tag">{{ item.type }}</span>
|
||
</div>
|
||
<p class="community-slogan">{{ item.slogan }}</p>
|
||
</div>
|
||
<div class="community-status">
|
||
<span class="status-dot"></span>
|
||
活跃
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="source-footer">
|
||
<span class="source-label">数据来源：</span>
|
||
<div class="source-content">
|
||
<img src="@/assets/imgs/logo/penguin_blue.svg" class="source-logo-circle" />
|
||
<span class="source-name">华科开放原子俱乐部</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__chartCard">
|
||
<h3 class="chartCard__title">重点城市高校开源社团数量</h3>
|
||
<div class="chartCard__container">
|
||
<div v-if="isEmpty.club" class="num-empty"></div>
|
||
<div v-else id="clubChart" class="chart"></div>
|
||
</div>
|
||
<div class="source-footer">
|
||
<span class="source-label">数据来源：</span>
|
||
<div class="source-content">
|
||
<img src="@/assets/imgs/logo/penguin_blue.svg" class="source-logo-circle" />
|
||
<span class="source-name">华科开放原子俱乐部</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__chartCard">
|
||
<h3 class="chartCard__title">各省市开源相关政策发布数量</h3>
|
||
<div class="chartCard__container">
|
||
<div v-if="isEmpty.policy" class="num-empty"></div>
|
||
<div v-else id="policyChart" class="chart"></div>
|
||
</div>
|
||
<div class="source-footer">
|
||
<span class="source-label">数据来源：</span>
|
||
<div class="source-content">
|
||
<img src="@/assets/imgs/logo/logo-kfyzjjh.png" class="source-logo-circle" />
|
||
<span class="source-name">开放原子开源基金会</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__chartCard">
|
||
<h3 class="chartCard__title">开放原子校园行·城市活动场次</h3>
|
||
<div class="chartCard__container">
|
||
<div v-if="isEmpty.campus" class="num-empty"></div>
|
||
<div v-else id="campusChart" class="chart"></div>
|
||
</div>
|
||
<div class="source-footer">
|
||
<span class="source-label">数据来源：</span>
|
||
<div class="source-content">
|
||
<img src="@/assets/imgs/logo/logo-kfyzjjh.png" class="source-logo-circle" />
|
||
<span class="source-name">开放原子开源基金会</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__chartCard chartCard__wide">
|
||
<h3 class="chartCard__title">全国重点城市开源镜像站/节点数量对比</h3>
|
||
<div class="chartCard__container">
|
||
<div v-if="isEmpty.mirrors" class="num-empty"></div>
|
||
<div v-else id="mirrorChart" class="chart"></div>
|
||
</div>
|
||
<div class="source-footer">
|
||
<span class="source-label">数据来源：</span>
|
||
<div class="source-content">
|
||
<img src="@/assets/imgs/logo/penguin_blue.svg" class="source-logo-circle" />
|
||
<span class="source-name">华科开放原子俱乐部</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="index-module__NV_5cW__actionSection">
|
||
<div class="index-module__NV_5cW__actionBackground"></div>
|
||
<div class="index-module__NV_5cW__actionContent">
|
||
<div class="index-module__NV_5cW__actionIcon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.1 4-1 4-1s.25 2.25 1 4c.45 1.04 1 2 2 3h-5z"/></svg>
|
||
</div>
|
||
<h3 class="index-module__NV_5cW__actionTitle">加入武汉开源社区</h3>
|
||
<p class="index-module__NV_5cW__actionDescription">与武汉本地开发者、企业、高校携手共建开源生态</p>
|
||
<button type="button" class="action-btn">
|
||
<span>加入我们</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, ref, nextTick, watch, onUnmounted, computed } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
import { usePageResize } from '@/utils/hooks/usePageResize';
|
||
import StatsBar from './StatsBar.vue'
|
||
|
||
const { widthType } = usePageResize();
|
||
|
||
// ================= 数据定义 =================
|
||
const githubProjects = ref([
|
||
{ name: 'DWSurvey', desc: '基于Vue+SpringBoot的问卷系统', stars: '3.2k' },
|
||
{ name: 'Eova', desc: '快速开发平台', stars: '2.8k' },
|
||
{ name: 'ClickVisual', desc: '日志分析平台', stars: '2.5k' },
|
||
{ name: 'Meta2d.js', desc: '2D可视化引擎', stars: '2.1k' },
|
||
{ name: 'Deepin Wine', desc: '在Linux运行Windows应用', stars: '6.5k' },
|
||
{ name: 'GoFrame', desc: 'Go语言企业级开发框架', stars: '11k' },
|
||
{ name: 'MindSpore', desc: '全场景AI计算框架(武汉所)', stars: '18k' },
|
||
{ name: 'IoTDB', desc: '物联网时序数据库', stars: '4.2k' }
|
||
]);
|
||
|
||
const activeTab = ref(0);
|
||
|
||
const excellentProjects = ref([
|
||
{ "name": "调问（DWSurvey）", "desc": "开源问卷表单系统", "org": "极推科技" },
|
||
{ "name": "Eova", "desc": "低代码开发平台", "org": "武汉简码" },
|
||
{ "name": "ClickVisual", "desc": "可视化日志分析告警平台", "org": "武汉初心" },
|
||
{ "name": "Meta2d.js", "desc": "2D图元可视化引擎", "org": "乐吾乐科技" },
|
||
{ "name": "Juno", "desc": "分布式微服务管理系统", "org": "武汉斗鱼" },
|
||
{ "name": "Opentalent", "desc": "开源人才评价系统", "org": "湖北大学" },
|
||
{ "name": "Fountain", "desc": "仓颉语言版 Spring 框架替代", "org": "江汉大学" },
|
||
{ "name": "deepin", "desc": "深度桌面操作系统", "org": "深之度" },
|
||
{ "name": "RustSBI", "desc": "RISC-V 安全引导程序", "org": "华中科技大学" },
|
||
{ "name": "NextDenovo", "desc": "长读长序列组装工具", "org": "武汉希望组" }
|
||
]);
|
||
const chinaExcellentProjects = ref([
|
||
{
|
||
"name": "Deepin 深度操作系统",
|
||
"desc": "国内领先的国产 Linux 发行版，旨在为全球用户提供美观易用、安全可靠的操作系统体验，是国产软件生态的核心。",
|
||
"org": "武汉深之度"
|
||
},
|
||
{
|
||
"name": "Jupiter 微服务治理框架",
|
||
"desc": "由斗鱼研发并开源的面向治理的微服务框架，支持多数据源、多注册中心，适用于高并发场景。",
|
||
"org": "武汉斗鱼"
|
||
},
|
||
{
|
||
"name": "RustSBI 安全引导程序",
|
||
"desc": "基于 Rust 语言开发的 RISC-V 指令集体系结构安全引导程序，提供更高内存安全性。",
|
||
"org": "华中科技大学"
|
||
},
|
||
{
|
||
"name": "芯片开源 EDA 研发",
|
||
"desc": "致力于国产电子设计自动化工具开源化，解决芯片设计环节中的关键技术难题。",
|
||
"org": "华中科技大学"
|
||
},
|
||
{
|
||
"name": "LuoJiaSET 框架与 LuoJiaSET 样本库",
|
||
"desc": "专注于智能遥感影像解译，提供海量遥感样本数据集和深度学习框架。",
|
||
"org": "武汉大学"
|
||
},
|
||
{
|
||
"name": "鲲鹏安全库 (Kunpengsecl)",
|
||
"desc": "基于鲲鹏处理器的机密计算和受信任执行环境安全开发库，支撑云计算与隐私计算。",
|
||
"org": "武汉大学"
|
||
},
|
||
{
|
||
"name": "柚坛工具箱 (Uotan Toolbox)",
|
||
"desc": "针对 Android 发烧友开发的图形化综合工具箱，集成刷机、系统优化等多种功能。",
|
||
"org": "武昌理工学院"
|
||
},
|
||
{
|
||
"name": "凹语言 (Wa Language)",
|
||
"desc": "国内首个针对 WebAssembly 设计的通用编程语言，兼具 Web 灵活性与原生运行速度。",
|
||
"org": "武汉凹语言"
|
||
},
|
||
{
|
||
"name": "OpenHIS 开源医疗系统",
|
||
"desc": "开源的医院信息系统，旨在通过标准化、模块化方式赋能基层医疗机构数字化升级。",
|
||
"org": "武汉新致新源"
|
||
},
|
||
{
|
||
"name": "NextDenovo",
|
||
"desc": "高效且精确的长读长序列纠错和组装工具，主要用于基因组测序领域。",
|
||
"org": "武汉希望组生物科技有限公司"
|
||
}
|
||
]);
|
||
|
||
// 城市社区数量
|
||
const cityCommunityData = {
|
||
xAxis: ['北京', '上海', '深圳', '杭州', '武汉', '成都'],
|
||
data: [42, 38, 35, 28, 22, 18]
|
||
};
|
||
|
||
// 武汉知名社区数据
|
||
const wuhanCommunities = ref([
|
||
{ name: 'Deepin (深度)', type: '操作系统', slogan: '最大的国产桌面操作系统开源社区' },
|
||
{ name: 'OpenHarmony 武汉', type: '万物互联', slogan: '华科/武大等高校深度参与的终端操作系统' },
|
||
{ name: 'MindSpore 武汉', type: '人工智能', slogan: '昇思全场景AI框架武汉开发者社区' },
|
||
{ name: 'IoTDB 社区', type: '工业物联网', slogan: '源自清华在汉广泛应用的工业时序数据库' },
|
||
{ name: 'GoFrame 社区', type: '后端开发', slogan: '模块化、全栈式、模块化的Go语言开发框架' },
|
||
{ name: '飞桨 (PaddlePaddle)', type: '深度学习', slogan: '百度武汉开源生态开发者汇聚地' },
|
||
{ name: '极狐 GitLab 武汉', type: 'DevOps', slogan: '开源信息基础设施与协同开发平台' }
|
||
]);
|
||
|
||
const activeCommunityTab = ref(0);
|
||
const communityScrollRef = ref<HTMLElement | null>(null);
|
||
let communityTimer: NodeJS.Timeout | null = null;
|
||
|
||
const switchCommunityTab = () => {
|
||
if (activeCommunityTab.value === 1) {
|
||
activeCommunityTab.value = 0
|
||
nextTick(() => initCommunityRankChart());
|
||
pauseCommunityScroll();
|
||
} else {
|
||
activeCommunityTab.value = 1
|
||
nextTick(() => startCommunityScroll());
|
||
}
|
||
};
|
||
|
||
const startCommunityScroll = () => {
|
||
const container = communityScrollRef.value;
|
||
if (!container) return;
|
||
const list = container.querySelector('.community-scroll-list') as HTMLElement;
|
||
if (!list || list.scrollHeight <= container.clientHeight) return;
|
||
|
||
if (communityTimer) clearInterval(communityTimer);
|
||
communityTimer = setInterval(() => {
|
||
container.scrollTop += 1;
|
||
if (container.scrollTop >= (list.scrollHeight - container.clientHeight)) {
|
||
container.scrollTop = 0;
|
||
}
|
||
}, 45);
|
||
};
|
||
const pauseCommunityScroll = () => communityTimer && clearInterval(communityTimer);
|
||
const resumeCommunityScroll = () => activeCommunityTab.value === 1 && startCommunityScroll();
|
||
|
||
const currentProjectList = computed(() => {
|
||
return activeTab.value === 0 ? chinaExcellentProjects.value : excellentProjects.value;
|
||
});
|
||
|
||
const switchTab = (index: number) => {
|
||
if(activeTab.value===1) {
|
||
activeTab.value = 0
|
||
} else {
|
||
activeTab.value = 1
|
||
}
|
||
nextTick(() => {
|
||
if (scrollContainer2.value) scrollContainer2.value.scrollTop = 0;
|
||
pauseScroll(2);
|
||
resumeScroll(2);
|
||
});
|
||
};
|
||
|
||
const chartData = ref({
|
||
cityProject: {
|
||
xAxis: ['北京', '上海', '深圳', '杭州', '武汉', '成都', '广州'],
|
||
data: [12500, 11200, 9800, 8500, 6200, 5800, 5400]
|
||
},
|
||
talent: {
|
||
xAxis: ['北京', '深圳', '上海', '杭州', '武汉', '南京'],
|
||
data: [45000, 38000, 36000, 28000, 22000, 15000]
|
||
},
|
||
communityRank: {
|
||
xAxis: ['Deepin', 'OpenHarmony', 'MindSpore', 'IoTDB', 'GoFrame'],
|
||
data: [95, 92, 88, 76, 72]
|
||
},
|
||
club: {
|
||
xAxis: ['北京', '武汉', '上海', '西安', '南京'],
|
||
data: [28, 24, 20, 18, 15]
|
||
},
|
||
policy: {
|
||
xAxis: ['北京', '上海', '广东', '江苏', '湖北', '浙江'],
|
||
data: [12, 10, 9, 8, 7, 6]
|
||
},
|
||
campus: {
|
||
xAxis: ['武汉', '北京', '成都', '深圳', '西安'],
|
||
data: [35, 32, 25, 20, 18]
|
||
},
|
||
mirrors: {
|
||
xAxis: ['清华TUNA', '中科大', '阿里', '华为', '华科HUST', '网易', '腾讯'],
|
||
data: [520, 480, 450, 420, 380, 300, 280]
|
||
}
|
||
});
|
||
|
||
// 数据定义
|
||
const developerNames = ['白纯骢', '陆红旭', '蔡冬亮', '张继德', '蒋周奇', '张天雄', '阮文俊', '李奇', '陈鹏轩', '杨帆'];
|
||
|
||
const developerScrollRef = ref<HTMLElement | null>(null);
|
||
let developerTimer: NodeJS.Timeout | null = null;
|
||
|
||
// 自动生成头像背景色
|
||
const getAvatarBg = (index: number) => {
|
||
const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f59e0b', '#10b981', '#06b6d4', '#3b82f6'];
|
||
return colors[index % colors.length];
|
||
};
|
||
|
||
// 滚动逻辑
|
||
const startDeveloperScroll = () => {
|
||
const container = developerScrollRef.value;
|
||
if (!container) return;
|
||
const list = container.querySelector('.developer-list') as HTMLElement;
|
||
if (!list || list.scrollHeight <= container.clientHeight) return;
|
||
|
||
if (developerTimer) clearInterval(developerTimer);
|
||
developerTimer = setInterval(() => {
|
||
container.scrollTop += 1;
|
||
if (container.scrollTop >= (list.scrollHeight - container.clientHeight)) {
|
||
container.scrollTop = 0;
|
||
}
|
||
}, 40);
|
||
};
|
||
|
||
const pauseDeveloperScroll = () => developerTimer && clearInterval(developerTimer);
|
||
const resumeDeveloperScroll = () => startDeveloperScroll();
|
||
|
||
const isEmpty = ref({
|
||
cityProject: false, talent: false, developer: false, communityRank: false,
|
||
club: false, policy: false, campus: false, mirrors: false
|
||
});
|
||
|
||
const chartInstances = ref<{[key: string]: echarts.ECharts | null}>({});
|
||
const scrollContainer1 = ref<HTMLDivElement | null>(null);
|
||
const scrollContainer2 = ref<HTMLDivElement | null>(null);
|
||
const scrollTimers: { [key: number]: NodeJS.Timeout | null } = { 1: null, 2: null };
|
||
|
||
const autoScroll = (key: number) => {
|
||
const container = key === 1 ? scrollContainer1.value : scrollContainer2.value;
|
||
if (!container) return;
|
||
const list = container.querySelector('.project-list') as HTMLDivElement;
|
||
if (!list || list.scrollHeight <= container.clientHeight) {
|
||
if (scrollTimers[key]) clearInterval(scrollTimers[key]!);
|
||
return;
|
||
}
|
||
if (scrollTimers[key]) clearInterval(scrollTimers[key]!);
|
||
scrollTimers[key] = setInterval(() => {
|
||
container.scrollTop += 1;
|
||
if (list.scrollHeight - container.scrollTop <= container.clientHeight + 1) {
|
||
container.scrollTop = 0;
|
||
}
|
||
}, 40);
|
||
};
|
||
|
||
const pauseScroll = (key: number) => { if (scrollTimers[key]) clearInterval(scrollTimers[key]!); };
|
||
const resumeScroll = (key: number) => autoScroll(key);
|
||
|
||
// ================= 图表初始化=================
|
||
|
||
const commonGrid = { left: '3%', right: '4%', bottom: '15px', top: '15%', containLabel: true };
|
||
const colorPalette = ['#3b82f6', '#06b6d4', '#8b5cf6', '#ec4899', '#f59e0b']; // 蓝, 青, 紫, 粉, 橙
|
||
|
||
const initCityProjectChart = () => {
|
||
const el = document.getElementById('cityProjectChart');
|
||
if(!el) return;
|
||
const myChart = echarts.init(el);
|
||
chartInstances.value.cityProject = myChart;
|
||
myChart.setOption({
|
||
tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 个' },
|
||
grid: commonGrid,
|
||
xAxis: { type: 'category', data: chartData.value.cityProject.xAxis, axisLabel: { color: '#666', fontSize: 11 } },
|
||
yAxis: { type: 'value',name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
|
||
series: [{
|
||
type: 'bar', data: chartData.value.cityProject.data, barWidth: '50%',
|
||
itemStyle: { borderRadius: [4, 4, 0, 0], color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'#4F46E5'},{offset:1,color:'#818CF8'}]) }
|
||
}]
|
||
});
|
||
};
|
||
|
||
const initTalentChart = () => {
|
||
const el = document.getElementById('talentChart');
|
||
if(!el) return;
|
||
const myChart = echarts.init(el);
|
||
chartInstances.value.talent = myChart;
|
||
myChart.setOption({
|
||
tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 人' },
|
||
grid: commonGrid,
|
||
xAxis: { type: 'category', data: chartData.value.talent.xAxis, axisLabel: { color: '#666' } },
|
||
yAxis: { type: 'value',name: '单位：人', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
|
||
series: [{
|
||
type: 'bar', data: chartData.value.talent.data, barWidth: '50%',
|
||
itemStyle: { borderRadius: [4, 4, 0, 0], color: '#F97316' } // 橙色
|
||
}]
|
||
});
|
||
};
|
||
|
||
const initDeveloperChart = () => {
|
||
const el = document.getElementById('developerChart');
|
||
if(!el) return;
|
||
const myChart = echarts.init(el);
|
||
chartInstances.value.developer = myChart;
|
||
myChart.setOption({
|
||
tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 贡献分' },
|
||
grid: { left: '3%', right: '5%', bottom: '15px', top: '5%', containLabel: true },
|
||
xAxis: { type: 'value', show: false }, // 隐藏x轴
|
||
yAxis: { type: 'category', data: chartData.value.developer.yAxis.reverse(), axisLine: {show: false}, axisTick: {show: false}, axisLabel: { color: '#333', fontWeight: 500 } },
|
||
series: [{
|
||
type: 'bar', data: chartData.value.developer.data.reverse(), barWidth: 16,
|
||
itemStyle: { color: new echarts.graphic.LinearGradient(1,0,0,0,[{offset:0,color:'#7C3AED'},{offset:1,color:'#C4B5FD'}]), borderRadius: [0, 8, 8, 0] },
|
||
label: { show: false } // **修改点：隐藏具体分数**
|
||
}]
|
||
});
|
||
};
|
||
|
||
const initCommunityRankChart = () => {
|
||
const el = document.getElementById('communityRankChart');
|
||
if(!el) return;
|
||
const myChart = echarts.init(el);
|
||
myChart.setOption({
|
||
tooltip: { trigger: 'axis', valueFormatter: (val: any) => val + ' 个' },
|
||
grid: { left: '3%', right: '4%', bottom: '15px', top: '22%', containLabel: true },
|
||
xAxis: { type: 'category', data: ['北京', '上海', '深圳', '杭州', '武汉', '成都'], axisLabel: { color: '#666' } },
|
||
yAxis: { type: 'value', name: '单位：个', nameTextStyle: { color: '#999' } },
|
||
series: [{
|
||
type: 'bar',
|
||
data: [42, 38, 35, 28, 22, 18],
|
||
barWidth: '40%',
|
||
itemStyle: { borderRadius: [4, 4, 0, 0], color: '#3b82f6' }
|
||
}]
|
||
});
|
||
};
|
||
|
||
const initClubChart = () => {
|
||
const el = document.getElementById('clubChart');
|
||
if(!el) return;
|
||
const myChart = echarts.init(el);
|
||
chartInstances.value.club = myChart;
|
||
myChart.setOption({
|
||
tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 个' },
|
||
grid: commonGrid,
|
||
xAxis: { type: 'category', data: chartData.value.club.xAxis, axisLabel: { color: '#666' } },
|
||
yAxis: { type: 'value',name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
|
||
series: [{
|
||
type: 'line', data: chartData.value.club.data,
|
||
smooth: true, symbolSize: 8,
|
||
lineStyle: { width: 3, color: '#F59E0B' },
|
||
itemStyle: { color: '#F59E0B', borderColor: '#fff', borderWidth: 2 },
|
||
areaStyle: { opacity: 0.15, color: '#F59E0B' }
|
||
}]
|
||
});
|
||
};
|
||
|
||
const initPolicyChart = () => {
|
||
const el = document.getElementById('policyChart');
|
||
if(!el) return;
|
||
const myChart = echarts.init(el);
|
||
chartInstances.value.policy = myChart;
|
||
myChart.setOption({
|
||
tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 条' },
|
||
grid: commonGrid,
|
||
xAxis: { type: 'category', data: chartData.value.policy.xAxis, axisLabel: { color: '#666' } },
|
||
yAxis: { type: 'value', name: '单位：条',splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
|
||
series: [{
|
||
type: 'bar', data: chartData.value.policy.data, barWidth: '45%',
|
||
itemStyle: { borderRadius: [4, 4, 0, 0], color: '#2563EB' } // 蓝色
|
||
}]
|
||
});
|
||
};
|
||
|
||
const initCampusChart = () => {
|
||
const el = document.getElementById('campusChart');
|
||
if(!el) return;
|
||
const myChart = echarts.init(el);
|
||
chartInstances.value.campus = myChart;
|
||
// **修改点：去掉三角形pictorialBar，改为美观的圆角柱状图**
|
||
myChart.setOption({
|
||
tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 场' },
|
||
grid: commonGrid,
|
||
xAxis: { type: 'category', data: chartData.value.campus.xAxis, axisLabel: { color: '#666' } },
|
||
yAxis: { type: 'value',name: '单位：场次', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
|
||
series: [{
|
||
type: 'bar',
|
||
data: chartData.value.campus.data,
|
||
barWidth: '35%',
|
||
itemStyle: {
|
||
borderRadius: [8, 8, 0, 0], // 圆角
|
||
// 活力洋红色渐变
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#EC4899' },
|
||
{ offset: 1, color: '#F472B6' }
|
||
])
|
||
}
|
||
}]
|
||
});
|
||
};
|
||
|
||
const initMirrorChart = () => {
|
||
const el = document.getElementById('mirrorChart');
|
||
if(!el) return;
|
||
const myChart = echarts.init(el);
|
||
chartInstances.value.mirrors = myChart;
|
||
myChart.setOption({
|
||
tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 个节点' },
|
||
grid: { left: '3%', right: '3%', bottom: '15px', top: '15%', containLabel: true },
|
||
xAxis: { type: 'category', data: chartData.value.mirrors.xAxis, axisLabel: { color: '#666' } },
|
||
yAxis: { type: 'value',name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
|
||
series: [{
|
||
type: 'bar', data: chartData.value.mirrors.data,
|
||
barWidth: 30,
|
||
itemStyle: {
|
||
borderRadius: [4, 4, 0, 0],
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#0EA5E9' },
|
||
{ offset: 1, color: '#38BDF8' }
|
||
])
|
||
}
|
||
}]
|
||
});
|
||
};
|
||
|
||
const initCharts = () => {
|
||
nextTick(() => {
|
||
initCityProjectChart(); initTalentChart(); initDeveloperChart();
|
||
initCommunityRankChart(); initClubChart(); initPolicyChart();
|
||
initCampusChart(); initMirrorChart();
|
||
});
|
||
};
|
||
|
||
const init = () => {
|
||
nextTick(() => {
|
||
initCityProjectChart(); initTalentChart(); initDeveloperChart();
|
||
initCommunityRankChart(); initClubChart(); initPolicyChart();
|
||
initCampusChart(); initMirrorChart();
|
||
|
||
autoScroll(1); autoScroll(2);startCommunityScroll();startDeveloperScroll();
|
||
});
|
||
}
|
||
const unInit = () => {
|
||
Object.values(scrollTimers).forEach(t => t && clearInterval(t));
|
||
pauseDeveloperScroll();
|
||
pauseCommunityScroll();
|
||
}
|
||
|
||
watch(widthType, () => { init() });
|
||
onMounted(() => { init() });
|
||
onUnmounted(() => { unInit() });
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.index-module__NV_5cW__container {
|
||
min-height: 100vh;
|
||
//background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); /* 深蓝到深紫背景 */
|
||
padding: 2rem 1rem;
|
||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 头部样式 */
|
||
.index-module__NV_5cW__header {
|
||
width: 1400px;
|
||
text-align: center;
|
||
padding: 1rem;
|
||
position: relative;
|
||
margin: 0 auto 3rem;
|
||
}
|
||
|
||
.header-content {
|
||
position: relative;
|
||
z-index: 10;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.header-title-row {
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.main-title {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
letter-spacing: 2px;
|
||
background: linear-gradient(to right, #fff, #93c5fd);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
|
||
}
|
||
|
||
.sub-title {
|
||
color: #94a3b8;
|
||
font-size: 1.1rem;
|
||
font-weight: 300;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.title-decoration {
|
||
width: 60px; height: 2px;
|
||
background: linear-gradient(90deg, transparent, #60a5fa);
|
||
}
|
||
.title-decoration.right {
|
||
background: linear-gradient(90deg, #60a5fa, transparent);
|
||
}
|
||
|
||
/* 标题栏图表 Icon */
|
||
.index-module__NV_5cW__sectionHeader {
|
||
display: flex; justify-content: flex-start; margin-bottom: 1.5rem;
|
||
max-width: 1400px; margin: 0 auto 1.5rem auto; padding: 0 0.5rem;
|
||
}
|
||
.index-module__NV_5cW__sectionTitle {
|
||
display: flex; align-items: center; gap: 0.8rem; font-size: 1.4rem; font-weight: 600; color: #fff;
|
||
}
|
||
|
||
/* 网格系统 */
|
||
.index-module__NV_5cW__chartsGrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
||
gap: 1.5rem;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 卡片玻璃拟态美化 */
|
||
.index-module__NV_5cW__chartCard {
|
||
background: rgba(255, 255, 255, 0.95); /* 高不透明度白底，保证图表清晰 */
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 16px;
|
||
padding: 1.25rem;
|
||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.index-module__NV_5cW__chartCard:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.chartCard__wide { grid-column: 1 / -1; }
|
||
|
||
.chartCard__title {
|
||
font-size: 1.05rem;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
margin-bottom: 1rem;
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.chartCard__container {
|
||
width: 100%; height: 300px; position: relative;
|
||
}
|
||
|
||
/* 列表样式优化 */
|
||
.list-container {
|
||
height: 300px; overflow-y: hidden;
|
||
padding: 0 4px;
|
||
}
|
||
.project-list { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 1rem; }
|
||
|
||
.project-item {
|
||
display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
|
||
background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;
|
||
transition: all 0.2s;
|
||
}
|
||
.project-item:hover {
|
||
background: #fff; border-color: #3b82f6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
|
||
}
|
||
|
||
.project-rank-wrapper {
|
||
width: 24px; display: flex; justify-content: center;
|
||
}
|
||
.project-rank {
|
||
width: 20px; height: 20px; border-radius: 6px;
|
||
background: #cbd5e1; color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 11px; font-weight: 700;
|
||
}
|
||
/* 前三名高亮 */
|
||
.project-item:nth-child(1) .project-rank { background: linear-gradient(135deg, #fbbf24, #d97706); }
|
||
.project-item:nth-child(2) .project-rank { background: linear-gradient(135deg, #94a3b8, #64748b); }
|
||
.project-item:nth-child(3) .project-rank { background: linear-gradient(135deg, #dba789, #b07d62); }
|
||
.project-rank.rank-new { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; }
|
||
|
||
.project-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
|
||
.project-name { font-size: 13px; font-weight: 700; color: #333; }
|
||
.project-desc { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.project-stars { font-size: 11px; font-weight: 600; color: #f59e0b; background: #fffbeb; padding: 2px 6px; border-radius: 4px; }
|
||
.project-org-tag { font-size: 11px; color: #3b82f6; background: #eff6ff; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
|
||
|
||
/* Tabs 美化 */
|
||
.tabs-header {
|
||
display: flex; justify-content: center; gap: 4px;
|
||
background: #f1f5f9; padding: 4px; border-radius: 8px;
|
||
margin: 0 auto 0.8rem auto; width: fit-content;
|
||
}
|
||
.tab-pill {
|
||
font-size: 12px; padding: 4px 12px; cursor: pointer; border-radius: 6px;
|
||
color: #64748b; font-weight: 500; transition: all 0.2s;
|
||
}
|
||
.tab-pill.active {
|
||
background: #fff; color: #3b82f6; font-weight: 600;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
/* 来源 Footer 样式 (修改版：数据来源：Icon + Text) */
|
||
.source-footer {
|
||
margin-top: auto;
|
||
padding-top: 0.75rem;
|
||
border-top: 1px solid #f1f5f9;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end; /* 右对齐 */
|
||
font-size: 11px;
|
||
}
|
||
|
||
.source-label {
|
||
color: #94a3b8; /* 浅灰色标签 */
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.source-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.source-icon { width: 14px; height: 14px; opacity: 0.8; }
|
||
.source-logo-circle { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
|
||
.source-logo-text { font-size: 9px; font-weight: bold; background: #333; color: #fff; padding: 0 3px; border-radius: 2px; }
|
||
.source-name { color: #475569; font-weight: 500; } /* 深一点的灰色文字 */
|
||
|
||
|
||
/* 行动区域 */
|
||
.index-module__NV_5cW__actionSection {
|
||
max-width: 1400px; margin: 2rem auto 0;
|
||
text-align: center; border-radius: 24px; padding: 3rem;
|
||
background: rgba(30, 41, 59, 0.6); /* 深色背景 */
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
backdrop-filter: blur(12px);
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.index-module__NV_5cW__actionBackground {
|
||
position: absolute; inset: 0;
|
||
background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent 40%);
|
||
z-index: 1;
|
||
}
|
||
.index-module__NV_5cW__actionContent { position: relative; z-index: 2; }
|
||
.index-module__NV_5cW__actionIcon {
|
||
color: #60a5fa; background: rgba(59, 130, 246, 0.1);
|
||
border-radius: 50%; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.5rem;
|
||
display: flex; justify-content: center; align-items: center;
|
||
}
|
||
.index-module__NV_5cW__actionTitle { font-size: 1.8rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
|
||
.index-module__NV_5cW__actionDescription { color: #cbd5e1; margin-bottom: 1.5rem; }
|
||
.action-btn {
|
||
background: linear-gradient(135deg, #3b82f6, #6366f1);
|
||
border: none; color: white; padding: 0.8rem 2.5rem; border-radius: 50px;
|
||
font-weight: 600; cursor: pointer; font-size: 1rem;
|
||
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
||
transition: all 0.3s;
|
||
}
|
||
.action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); }
|
||
|
||
/* 工具类 */
|
||
.chart { width: 100%; height: 100%; }
|
||
.num-empty { height: 2px; width: 50%; background: #ddd; margin: 50% auto; }
|
||
|
||
.language-tab {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
background: linear-gradient(135deg, #f0f4ff, #faf5ff);
|
||
border-radius: 1rem;
|
||
padding: 0.3rem;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
|
||
border: 1px solid rgba(59, 130, 246, 0.1);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.language-tab:hover {
|
||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
|
||
border-color: rgba(59, 130, 246, 0.2);
|
||
}
|
||
|
||
.language-tab span {
|
||
padding: 0.45rem 1.2rem;
|
||
border-radius: 0.75rem;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
color: #666;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.language-tab span::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: translate(-50%, -50%);
|
||
transition: width 0.6s, height 0.6s;
|
||
}
|
||
|
||
.language-tab span:hover::before {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.language-tab span.active {
|
||
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||
color: #fff;
|
||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.language-tab span.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
|
||
border-radius: 0.75rem;
|
||
}
|
||
|
||
.community-scroll-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.community-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px;
|
||
background: #f8fafc;
|
||
border-radius: 10px;
|
||
border: 1px solid #eef2f6;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.community-item:hover {
|
||
background: #ffffff;
|
||
border-color: #3b82f6;
|
||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
|
||
}
|
||
|
||
.community-logo {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: linear-gradient(135deg, #3b82f6, #6366f1);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
margin-right: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.community-info {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.community-top {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.community-name {
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.community-tag {
|
||
font-size: 10px;
|
||
padding: 1px 6px;
|
||
background: #e0f2fe;
|
||
color: #0369a1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.community-slogan {
|
||
font-size: 12px;
|
||
color: #64748b;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.community-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 11px;
|
||
color: #10b981;
|
||
background: #ecfdf5;
|
||
padding: 2px 8px;
|
||
border-radius: 20px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.developer-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 4px 2px 20px 2px;
|
||
}
|
||
|
||
.developer-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px 12px;
|
||
background: #ffffff;
|
||
border: 1px solid #f1f5f9;
|
||
border-radius: 12px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.developer-item:hover {
|
||
transform: scale(1.02);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||
border-color: #e2e8f0;
|
||
}
|
||
|
||
/* 排名样式 */
|
||
.dev-rank {
|
||
width: 24px;
|
||
font-weight: 800;
|
||
font-style: italic;
|
||
color: #94a3b8;
|
||
font-size: 14px;
|
||
}
|
||
.dev-rank.rank-1 { color: #fbbf24; font-size: 18px; }
|
||
.dev-rank.rank-2 { color: #94a3b8; font-size: 16px; }
|
||
.dev-rank.rank-3 { color: #b45309; font-size: 15px; }
|
||
|
||
/* 头像占位 */
|
||
.dev-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
margin-right: 12px;
|
||
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.dev-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.dev-name {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.dev-tag {
|
||
font-size: 11px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.dev-score {
|
||
font-size: 11px;
|
||
color: #10b981;
|
||
background: #f0fdf4;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.main-title { font-size: 2rem; }
|
||
.index-module__NV_5cW__chartsGrid { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|