1
This commit is contained in:
刘正航
553
miniprogram/app.wxss
Normal file
553
miniprogram/app.wxss
Normal file
@@ -0,0 +1,553 @@
|
||||
/** app.wxss */
|
||||
page {
|
||||
--bg-1: #050c17;
|
||||
--bg-2: #0a1629;
|
||||
--bg-3: #102542;
|
||||
--card: rgba(12, 28, 49, 0.82);
|
||||
--card-soft: rgba(17, 35, 58, 0.78);
|
||||
--line: rgba(139, 177, 223, 0.24);
|
||||
--line-strong: rgba(139, 177, 223, 0.38);
|
||||
--title: #edf4ff;
|
||||
--text: #c7d8ee;
|
||||
--sub: #8fa9c7;
|
||||
--primary: #ff5a4f;
|
||||
--primary-2: #ff7b4f;
|
||||
--accent: #23a3ff;
|
||||
--accent-2: #2e7dff;
|
||||
--success: #2dcf95;
|
||||
--danger: #ff6276;
|
||||
--warning: #ffb454;
|
||||
--radius: 24rpx;
|
||||
--radius-sm: 16rpx;
|
||||
--shadow: 0 20rpx 54rpx rgba(2, 9, 20, 0.4);
|
||||
|
||||
min-height: 100%;
|
||||
color: var(--text);
|
||||
font-family: 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at 84% -10%, rgba(35, 163, 255, 0.22), transparent 40%),
|
||||
radial-gradient(circle at -10% 14%, rgba(255, 90, 79, 0.22), transparent 34%),
|
||||
linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 26rpx;
|
||||
padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 36rpx 30rpx;
|
||||
border-radius: 32rpx;
|
||||
color: #fff;
|
||||
background:
|
||||
linear-gradient(130deg, rgba(255, 120, 96, 0.22), rgba(255, 120, 96, 0) 38%),
|
||||
linear-gradient(135deg, #102848 0%, #1a4476 46%, #183357 100%);
|
||||
border: 1rpx solid rgba(166, 206, 246, 0.3);
|
||||
box-shadow: var(--shadow);
|
||||
animation: heroGlow 6s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -120rpx;
|
||||
top: -88rpx;
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 1rpx solid rgba(210, 234, 255, 0.4);
|
||||
background: rgba(8, 25, 47, 0.42);
|
||||
color: #dcecff;
|
||||
font-size: 20rpx;
|
||||
letter-spacing: 0.6rpx;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin-top: 14rpx;
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.2rpx;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #d2e2f7;
|
||||
line-height: 1.68;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.hero-metric {
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 21rpx;
|
||||
color: #dff0ff;
|
||||
border: 1rpx solid rgba(186, 219, 250, 0.34);
|
||||
background: rgba(7, 24, 45, 0.46);
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 20rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: var(--radius);
|
||||
background: var(--card);
|
||||
border: 1rpx solid var(--line);
|
||||
box-shadow: var(--shadow);
|
||||
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
|
||||
}
|
||||
|
||||
.card:active {
|
||||
transform: scale(0.992);
|
||||
border-color: var(--line-strong);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: 12rpx;
|
||||
color: var(--title);
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin-bottom: 16rpx;
|
||||
color: var(--sub);
|
||||
font-size: 23rpx;
|
||||
line-height: 1.66;
|
||||
}
|
||||
|
||||
.glass-divider {
|
||||
margin: 18rpx 0;
|
||||
height: 1rpx;
|
||||
background: linear-gradient(90deg, rgba(132, 171, 214, 0), rgba(132, 171, 214, 0.42), rgba(132, 171, 214, 0));
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
color: var(--sub);
|
||||
font-size: 24rpx;
|
||||
letter-spacing: 0.3rpx;
|
||||
}
|
||||
|
||||
.field-help {
|
||||
margin-top: 8rpx;
|
||||
color: var(--sub);
|
||||
font-size: 22rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 88rpx;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid rgba(125, 163, 204, 0.36);
|
||||
background: var(--card-soft);
|
||||
color: #eaf4ff;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 88rpx;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
.textarea:focus {
|
||||
border-color: rgba(157, 204, 255, 0.8);
|
||||
box-shadow: 0 0 0 2rpx rgba(35, 163, 255, 0.2);
|
||||
background: rgba(18, 39, 65, 0.9);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
min-height: 220rpx;
|
||||
padding-top: 16rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
min-width: 180rpx;
|
||||
text-align: right;
|
||||
color: var(--title);
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
display: flex;
|
||||
gap: 14rpx;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.btn-row .btn {
|
||||
flex: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 16rpx;
|
||||
border: none;
|
||||
border-radius: 999rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 650;
|
||||
padding: 16rpx 24rpx;
|
||||
letter-spacing: 0.6rpx;
|
||||
transform: translateY(0);
|
||||
transition: transform 0.16s ease, box-shadow 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
button.btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(2rpx) scale(0.985);
|
||||
}
|
||||
|
||||
.btn[disabled] {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background: linear-gradient(130deg, var(--primary), var(--primary-2));
|
||||
box-shadow: 0 14rpx 30rpx rgba(255, 91, 111, 0.35);
|
||||
}
|
||||
|
||||
.btn-accent {
|
||||
color: #fff;
|
||||
background: linear-gradient(130deg, var(--accent), var(--accent-2));
|
||||
box-shadow: 0 14rpx 30rpx rgba(41, 145, 255, 0.34);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
color: #d9e9ff;
|
||||
background: rgba(153, 191, 235, 0.14);
|
||||
border: 1rpx solid rgba(153, 191, 235, 0.34);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.row + .row {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--sub);
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: var(--title);
|
||||
font-size: 27rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.grid-auto {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220rpx, 1fr));
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.kpi {
|
||||
padding: 18rpx;
|
||||
border-radius: 18rpx;
|
||||
background: linear-gradient(145deg, rgba(24, 47, 78, 0.68), rgba(16, 31, 53, 0.94));
|
||||
border: 1rpx solid rgba(109, 152, 203, 0.24);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.kpi:active {
|
||||
transform: scale(0.985);
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #f2f7ff;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: var(--sub);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.module-card {
|
||||
padding: 20rpx;
|
||||
border-radius: 18rpx;
|
||||
background: linear-gradient(150deg, rgba(19, 40, 66, 0.88), rgba(14, 28, 48, 0.92));
|
||||
border: 1rpx solid rgba(122, 162, 206, 0.24);
|
||||
transition: transform 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.module-card:active {
|
||||
transform: translateY(2rpx) scale(0.99);
|
||||
border-color: rgba(167, 206, 247, 0.44);
|
||||
}
|
||||
|
||||
.module-name {
|
||||
color: #eff6ff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.module-desc {
|
||||
margin-top: 8rpx;
|
||||
color: var(--sub);
|
||||
font-size: 22rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.module-tag {
|
||||
display: inline-block;
|
||||
margin-top: 12rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 999rpx;
|
||||
color: #d4e9ff;
|
||||
font-size: 20rpx;
|
||||
border: 1rpx solid rgba(142, 183, 228, 0.34);
|
||||
background: rgba(23, 61, 103, 0.44);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin-top: 12rpx;
|
||||
padding: 18rpx;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid rgba(109, 152, 203, 0.24);
|
||||
background: rgba(18, 35, 58, 0.72);
|
||||
transition: transform 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.list-item:active {
|
||||
transform: scale(0.992);
|
||||
border-color: rgba(160, 200, 244, 0.42);
|
||||
}
|
||||
|
||||
.item-title {
|
||||
color: var(--title);
|
||||
font-size: 27rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.item-sub {
|
||||
margin-top: 8rpx;
|
||||
color: var(--sub);
|
||||
font-size: 23rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
margin-right: 8rpx;
|
||||
margin-bottom: 8rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
background: rgba(255, 181, 71, 0.16);
|
||||
border: 1rpx solid rgba(255, 181, 71, 0.4);
|
||||
color: #ffd487;
|
||||
}
|
||||
|
||||
.chip-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
color: #dbeeff;
|
||||
font-size: 22rpx;
|
||||
border: 1rpx solid rgba(145, 185, 228, 0.3);
|
||||
background: rgba(28, 64, 103, 0.34);
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
margin-top: 10rpx;
|
||||
width: 100%;
|
||||
height: 14rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(85, 123, 166, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #ff7654, #ff4f66);
|
||||
}
|
||||
|
||||
.progress-fill-safe {
|
||||
background: linear-gradient(90deg, #1fb6ff, #24d49a);
|
||||
}
|
||||
|
||||
.status-spam,
|
||||
.status-ham,
|
||||
.status-warn,
|
||||
.status-pending {
|
||||
display: inline-block;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
font-weight: 700;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.status-spam {
|
||||
color: #ffdce1;
|
||||
background: rgba(255, 91, 111, 0.22);
|
||||
border: 1rpx solid rgba(255, 108, 128, 0.42);
|
||||
}
|
||||
|
||||
.status-ham {
|
||||
color: #d4ffe9;
|
||||
background: rgba(53, 196, 140, 0.18);
|
||||
border: 1rpx solid rgba(86, 220, 167, 0.34);
|
||||
}
|
||||
|
||||
.status-warn {
|
||||
color: #ffe8c7;
|
||||
background: rgba(255, 181, 71, 0.2);
|
||||
border: 1rpx solid rgba(255, 201, 124, 0.4);
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
color: #d6e8ff;
|
||||
background: rgba(78, 143, 230, 0.22);
|
||||
border: 1rpx solid rgba(123, 175, 245, 0.42);
|
||||
}
|
||||
|
||||
.pager-row {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.pager-btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--sub);
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 30rpx 10rpx;
|
||||
color: var(--sub);
|
||||
font-size: 25rpx;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.fade-up {
|
||||
animation: fadeUp 0.5s ease both;
|
||||
}
|
||||
|
||||
.fade-up-delay-1 {
|
||||
animation-delay: 0.08s;
|
||||
}
|
||||
|
||||
.fade-up-delay-2 {
|
||||
animation-delay: 0.16s;
|
||||
}
|
||||
|
||||
.fade-up-delay-3 {
|
||||
animation-delay: 0.24s;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulseGlow 2.1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes heroGlow {
|
||||
0% {
|
||||
box-shadow: 0 20rpx 54rpx rgba(3, 8, 19, 0.36);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 28rpx 72rpx rgba(3, 8, 19, 0.54);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseGlow {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 12rpx 30rpx rgba(255, 91, 111, 0.24);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 18rpx 36rpx rgba(255, 91, 111, 0.46);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.hero-title {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user