119 lines
1.7 KiB
Plaintext
119 lines
1.7 KiB
Plaintext
/* ===== 首页 ===== */
|
|
.home {
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #e6f2f2 0%, #f5f7fa 30%);
|
|
}
|
|
|
|
.home-header {
|
|
text-align: center;
|
|
padding: 60rpx 0 40rpx;
|
|
}
|
|
|
|
.home-title {
|
|
display: block;
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
color: #2c7a7b;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.home-desc {
|
|
font-size: 26rpx;
|
|
color: #718096;
|
|
}
|
|
|
|
.home-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20rpx;
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.home-card {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 36rpx 24rpx;
|
|
text-align: center;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.home-card:active {
|
|
transform: scale(0.97);
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
.home-card-icon {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 20rpx;
|
|
}
|
|
|
|
.home-card-emoji {
|
|
font-size: 44rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.home-card-icon--entry {
|
|
background: #e6f7ff;
|
|
}
|
|
|
|
.home-card-icon--items {
|
|
background: #f0f5ff;
|
|
}
|
|
|
|
.home-card-icon--trend {
|
|
background: #f6ffed;
|
|
}
|
|
|
|
.home-card-icon--details {
|
|
background: #fff7e6;
|
|
}
|
|
|
|
.home-card-title {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.home-card-desc {
|
|
font-size: 22rpx;
|
|
color: #a0aec0;
|
|
}
|
|
|
|
/* 清除数据 */
|
|
.clear-section {
|
|
padding: 40rpx 24rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.clear-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
padding: 20rpx 40rpx;
|
|
border: 1rpx dashed #e53e3e;
|
|
border-radius: 12rpx;
|
|
background: #fff5f5;
|
|
}
|
|
|
|
.clear-btn:active {
|
|
background: #ffe0e0;
|
|
}
|
|
|
|
.clear-icon {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.clear-text {
|
|
font-size: 26rpx;
|
|
color: #e53e3e;
|
|
font-weight: 500;
|
|
}
|