2025年-公司是我家
2025年很安稳，没有涨薪、也没有被裁员，工作了以后才明白“平静”是一种幸福；不要对工作赋予很多意义和价值，自己的生活才是最重要的
参考了其他牛友的方式自制的职场报告(附上代码，可改字)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025职场生存报告</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
:root {
--bg-dark: #121212;
--card-bg: #1E1E1E;
--accent-green: #00E676; /* 全勤绿 */
--accent-red: #FF5252; /* 警告红 */
--accent-purple: #651FFF;
--neon-blue: #00B0FF;
--text-main: #FFFFFF;
--text-sub: #B0B0B0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'PingFang SC', 'Heiti SC', sans-serif;
background-color: #000;
display: flex;
justify-content: center;
min-height: 100vh;
color: var(--text-main);
}
/* 手机容器 */
.container {
width: 100%;
max-width: 450px;
background: linear-gradient(180deg, #1a2a6c 0%, #b21f1f 100%, #fdbb2d 100%); /* 备用背景 */
background: linear-gradient(to bottom, #141E30, #243B55); /* 深夜搬砖色 */
min-height: 100vh;
padding: 25px;
position: relative;
overflow: hidden;
box-shadow: 0 0 50px rgba(0,0,0,0.5);
}
/* 顶部 */
.header {
margin-top: 20px;
margin-bottom: 30px;
text-align: left;
animation: slideDown 1s ease;
}
.header h1 {
font-size: 28px;
font-weight: 800;
line-height: 1.2;
text-shadow: 0 0 10px rgba(0,176,255,0.5);
}
.header .sub-title {
font-size: 14px;
color: var(--text-sub);
margin-top: 5px;
opacity: 0.8;
}
/* 卡片通用样式 */
.card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
animation: fadeInUp 0.8s ease backwards;
}
/* 1. 出勤与休假对比 */
.attendance-box {
display: flex;
justify-content: space-between;
align-items: center;
}
.stat-group { text-align: center; flex: 1; }
.divider { width: 1px; height: 40px; background: rgba(255,255,255,0.2); }
.big-num { font-size: 32px; font-weight: bold; display: block; }
.label { font-size: 12px; color: var(--text-sub); }
.work-day { color: var(--neon-blue); text-shadow: 0 0 10px rgba(0,176,255,0.3); }
.off-day { color: var(--accent-green); opacity: 0.7; font-size: 24px; } /* 休假少，字体小一点 */
.comment {
font-size: 12px;
color: var(--text-sub);
margin-top: 15px;
background: rgba(0,0,0,0.2);
padding: 8px;
border-radius: 8px;
text-align: center;
}
/* 2. 薪资心电图 */
.salary-card {
border: 1px solid rgba(255, 82, 82, 0.3);
position: relative;
animation-delay: 0.2s;
}
.salary-title { font-size: 14px; color: var(--text-sub); display: flex; justify-content: space-between; }
.salary-0 {
font-size: 48px;
font-weight: 900;
color: var(--accent-red);
text-align: center;
margin: 20px 0;
letter-spacing: -2px;
animation: pulse 2s infinite;
}
.ekg-line {
height: 2px;
background: var(--accent-red);
width: 100%;
position: relative;
margin-bottom: 10px;
box-shadow: 0 0 8px var(--accent-red);
}
.ekg-line::after {
content: '';
position: absolute;
right: 0;
top: -4px;
width: 10px;
height: 10px;
background: var(--accent-red);
border-radius: 50%;
box-shadow: 0 0 10px var(--accent-red);
}
/* 3. 吵架与画饼 - 左右布局 */
.chaos-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
.chaos-item {
background: rgba(255,255,255,0.05);
border-radius: 16px;
padding: 20px 15px;
text-align: center;
border: 1px solid rgba(255,255,255,0.1);
animation: zoomIn 0.6s ease backwards;
}
.chaos-icon { font-size: 28px; margin-bottom: 10px; }
.n-times { font-family: 'Courier New', monospace; font-size: 24px; font-weight: bold; }
.fire-text { color: #FF9F43; }
.pie-text { color: #54a0ff; }
/* 标签墙 */
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
animation: fadeInUp 1s ease 0.6s backwards;
}
.tag {
font-size: 12px;
padding: 5px 12px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.2);
color: var(--text-sub);
}
.tag-highlight {
border-color: var(--neon-blue);
color: var(--neon-blue);
box-shadow: 0 0 5px rgba(0,176,255,0.3);
}
/* 盖章 */
.stamp {
position: absolute;
bottom: 80px;
right: 30px;
border: 4px solid var(--accent-red);
color: var(--accent-red);
font-size: 20px;
font-weight: 900;
padding: 10px;
border-radius: 8px;
transform: rotate(-15deg) scale(3);
opacity: 0;
animation: stampCrash 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335) 1.5s forwards;
background: rgba(0,0,0,0.5);
z-index: 10;
}
/* 底部 */
.footer {
text-align: center;
font-size: 12px;
color: rgba(255,255,255,0.3);
padding-bottom: 30px;
animation: fadeIn 1s ease 2s backwards;
}
/* 动画定义 */
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeInUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
@keyframes stampCrash {
0% { transform: rotate(-15deg) scale(3); opacity: 0; }
100% { transform: rotate(-15deg) scale(1); opacity: 1; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>2025<br>职场生存报告</h1>
<p class="sub-title">/// 只要干不死，就往死里干 ///</p>
</div>
<!-- 1. 出勤数据 -->
<div class="card attendance-card" style="animation-delay: 0.1s;">
<div class="attendance-box">
<div class="stat-group">
<span class="big-num work-day">245</span>
<span class="label">出勤天数</span>
</div>
<div class="divider"></div>
<div class="stat-group">
<span class="big-num off-day">3</span>
<span class="label">休假天数</span>
</div>
</div>
<div class="comment">
<i class="fas fa-quote-left"></i>
公司是你家，你却很少回自己家。
</div>
</div>
<!-- 2. 薪资扎心区 -->
<div class="card salary-card">
<div class="salary-title">
<span>年度薪资涨幅</span>
<i class="fas fa-chart-line" style="color:var(--accent-red)"></i>
</div>
<div class="salary-0">0%</div>
<div class="ekg-line"></div>
<div style="font-size:12px; color:var(--text-sub); text-align:right;">
心情起伏很大，但工资极其稳定
</div>
</div>
<!-- 3. 吵架与画饼 -->
<div class="chaos-grid">
<div class="chaos-item" style="animation-delay: 0.3s;">
<div class="chaos-icon fire-text"><i class="fas fa-fire"></i></div>
<div class="n-times fire-text">N次</div>
<div class="label" style="margin-top:5px;">职场对线</div>
<div style="font-size:10px; color:#666; margin-top:5px;">乳腺结节+1</div>
</div>
<div class="chaos-item" style="animation-delay: 0.4s;">
<div class="chaos-icon pie-text"><i class="fas fa-cookie-bite"></i></div>
<div class="n-times pie-text">N张</div>
<div class="label" style="margin-top:5px;">老板的大饼</div>
<div style="font-size:10px; color:#666; margin-top:5px;">消化不良</div>
</div>
</div>
<!-- 4. 标签 -->
<div class="tags-container">
<div class="tag tag-highlight"># 窝囊费领悟者</div>
<div class="tag"># 顶级牛马</div>
<div class="tag"># 情绪稳定(装的)</div>
<div class="tag tag-highlight"># 饼学博士</div>
<div class="tag"># 全勤奖钉子户</div>
</div>
<!-- 盖章 -->
<div class="stamp">
还活着
</div>
<div class="footer">
<p>2025 年度总结 · 纯属虚构(如有雷同太惨了)</p>
<p style="margin-top:10px;"><i class="fas fa-fingerprint"></i> 牛马认证专属</p>
</div>
</div>
</body>
</html>
参考文献：https://www.nowcoder.com/discuss/831215997032886272
#2025年终总结#