态势感知平台-增加武汉市开源建设生态页面展示
This commit is contained in:
fmk1023
@@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<div class="stats-bar-container">
|
||||
<div class="stats-bar-item">
|
||||
<span class="stats-number">150+</span>
|
||||
<span class="stats-label">开源企业</span>
|
||||
<div class="stats-glass-bar">
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">150+</span>
|
||||
<span class="stat-desc">开源企业</span>
|
||||
</div>
|
||||
<div class="stats-divider"></div>
|
||||
<div class="stats-bar-item">
|
||||
<span class="stats-number">30+</span>
|
||||
<span class="stats-label">高校参与</span>
|
||||
<div class="stat-separator"></div>
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">30+</span>
|
||||
<span class="stat-desc">高校参与</span>
|
||||
</div>
|
||||
<div class="stats-divider"></div>
|
||||
<div class="stats-bar-item">
|
||||
<span class="stats-number">120+</span>
|
||||
<span class="stats-label">社区活动</span>
|
||||
<div class="stat-separator"></div>
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">120+</span>
|
||||
<span class="stat-desc">社区活动</span>
|
||||
</div>
|
||||
<div class="stats-divider"></div>
|
||||
<div class="stats-bar-item">
|
||||
<span class="stats-number">200+</span>
|
||||
<span class="stats-label">开源项目</span>
|
||||
<div class="stat-separator"></div>
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">200+</span>
|
||||
<span class="stat-desc">开源项目</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -29,91 +29,109 @@ name: "StatsBar"
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.stats-bar-container {
|
||||
/* 基础布局 */
|
||||
.stats-glass-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
/* 布局控制：撑满容器并增加内边距 */
|
||||
width: 100%;
|
||||
padding: 1.5rem 2rem;
|
||||
margin-top: 1rem;
|
||||
gap: 1rem;
|
||||
padding: 2rem 4rem;
|
||||
//margin: 2rem 0;
|
||||
|
||||
/* 玻璃拟态增强 */
|
||||
background: rgba(255, 255, 255, 0.1); // 降低透明度更显高级
|
||||
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
||||
backdrop-filter: blur(12px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 1.25rem;
|
||||
/* 深色玻璃拟态背景 */
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
|
||||
/* 增加一个非常细微的内阴影，增加厚度感 */
|
||||
box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05),
|
||||
0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
/* 极细微的边框勾勒 */
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.stats-bar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
transition: transform 0.3s ease;
|
||||
/* 外阴影与内发光，增加悬浮感 */
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
|
||||
inset 0 0 20px rgba(255, 255, 255, 0.02);
|
||||
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(56, 189, 248, 0.4);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.stats-number {
|
||||
/* 使用渐变色让数字更有科技感 */
|
||||
background: #C8161D;
|
||||
.stat-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
.stat-value {
|
||||
text-shadow: 0 0 25px rgba(56, 189, 248, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
/* 科技感亮蓝渐变 */
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(180deg, #fff 0%, #38bdf8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
font-size: 1.75rem; // 略微调大
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
/* 基础发光效果 */
|
||||
filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
/* 颜色改为深灰带点蓝调，或者纯白(如果在深色背景下) */
|
||||
color: #4b5563;
|
||||
.stat-desc {
|
||||
/* 在黑底上使用半透明白色，更有高级感 */
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin-top: 0.25rem;
|
||||
opacity: 0.9;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stats-divider {
|
||||
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent);
|
||||
.stat-separator {
|
||||
/* 渐隐分割线 */
|
||||
width: 1px;
|
||||
height: 2.5rem;
|
||||
flex-shrink: 0;
|
||||
height: 3rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0),
|
||||
rgba(255, 255, 255, 0.2),
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
/* 在移动端隐藏分割线 */
|
||||
@media (max-width: 640px) {
|
||||
display: none;
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 1024px) {
|
||||
.stats-glass-bar {
|
||||
padding: 2rem;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式微调 */
|
||||
@media (max-width: 768px) {
|
||||
.stats-bar-container {
|
||||
padding: 1rem;
|
||||
gap: 1.5rem;
|
||||
.stats-glass-bar {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
.stats-number {
|
||||
font-size: 1.5rem;
|
||||
.stat-separator {
|
||||
width: 50%;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<div class="flex items-center justify-center mb-5">
|
||||
<div class="title-arrow-left"></div>
|
||||
|
||||
<h2 class="text-[32px] md:text-[40px] font-bold text-[#1a1a1a] px-5 tracking-[0.05em] leading-tight">
|
||||
<h2 class="text-[32px] md:text-[40px] font-bold text-white px-5 tracking-[0.05em] leading-tight">
|
||||
开源 · 武汉
|
||||
</h2>
|
||||
|
||||
@@ -750,10 +750,11 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.index-module__NV_5cW__header {
|
||||
width: 1400px;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 2rem 1rem 1rem;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
|
||||
.index-module__NV_5cW__floatingElements {
|
||||
@@ -809,7 +810,6 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// 加宽标题区域：移除max-width限制，调整宽度为100%，增加内边距
|
||||
.index-module__NV_5cW__titleSection {
|
||||
color: #333;
|
||||
z-index: 2;
|
||||
@@ -818,10 +818,6 @@ onMounted(() => {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1200px; // 增加最大宽度，适配大屏
|
||||
margin: 0 auto; // 居中显示
|
||||
padding: 0 2rem; // 增加左右内边距
|
||||
}
|
||||
|
||||
.index-module__NV_5cW__titleContainer {
|
||||
@@ -1084,7 +1080,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.index-module__NV_5cW__sectionTitle {
|
||||
color: #333;
|
||||
//color: #333;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
1408
src/views/Jyh/Community/indexOld.vue
Normal file
1408
src/views/Jyh/Community/indexOld.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -29,6 +29,7 @@
|
||||
<transition name="fade-scale" mode="out-in">
|
||||
<RiskMonitor v-if="activeTab === 'risk'" />
|
||||
<EcoValuePan v-else-if="activeTab === 'eco'" />
|
||||
<Community v-else-if="activeTab === 'whky'" />
|
||||
</transition>
|
||||
</main>
|
||||
</div>
|
||||
@@ -38,13 +39,14 @@
|
||||
import { ref,onMounted,onUnmounted } from 'vue';
|
||||
import RiskMonitor from '@/views/Jyh/security/index.vue';
|
||||
import EcoValuePan from '@/views/Jyh/ecosystem/index.vue';
|
||||
import Community from '@/views/Jyh/Community/index.vue';
|
||||
|
||||
const activeTab = ref('risk');
|
||||
|
||||
const tabs = [
|
||||
{ id: 'risk', label: '全球开源风险态势感知监控中心', icon: 'fas fa-shield-virus' },
|
||||
{ id: 'eco', label: '开源生态与贡献价值全景', icon: 'fas fa-chart-network' },
|
||||
{ id: 'whky', label: '开源武汉', icon: 'fas fa-chart-network' },
|
||||
{ id: 'whky', label: '武汉市开源生态建设', icon: 'fas fa-chart-network' },
|
||||
];
|
||||
|
||||
const isFixed = ref(false);
|
||||
|
||||
Reference in New Issue
Block a user