init

项目初始化

pages/home/home.wxss

@@ -0,0 +1,156 @@
+.page {
+  padding: 32rpx;
+  min-height: 100vh;
+  box-sizing: border-box;
+  background: #FDFBF7;
+}
+
+/* ---- Hero 品牌头图 ---- */
+.hero {
+  position: relative;
+  overflow: hidden;
+  padding: 48rpx 40rpx 56rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(135deg, #2C1810 0%, #4A2B1D 55%, #6B3F24 100%);
+  box-shadow: 0 12rpx 32rpx rgba(44, 24, 16, 0.18);
+  color: #FDFBF7;
+}
+.hero-chip {
+  display: inline-block;
+  padding: 10rpx 22rpx;
+  border-radius: 999rpx;
+  background: rgba(198, 123, 48, 0.18);
+  color: #E3B37C;
+  font-size: 22rpx;
+  margin-bottom: 22rpx;
+}
+.hero-name {
+  font-size: 48rpx;
+  font-weight: 700;
+  color: #FFFFFF;
+  letter-spacing: 2rpx;
+}
+.hero-enc {
+  margin-top: 14rpx;
+  font-size: 26rpx;
+  color: #E8DCCB;
+  line-height: 1.6;
+}
+.hero-skeleton {
+  min-height: 240rpx;
+  background: linear-gradient(90deg, #EFE6D9 25%, #FAF4EC 50%, #EFE6D9 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+
+/* ---- 模块网格 ---- */
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+  margin-top: 32rpx;
+}
+.module {
+  width: 31%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  background: #FFF;
+  border-radius: 22rpx;
+  padding: 30rpx 12rpx 26rpx;
+  box-shadow: 0 6rpx 24rpx rgba(44, 24, 16, 0.06);
+  transition: transform 0.18s ease, opacity 0.18s ease;
+}
+.module-hover {
+  transform: scale(1.03);
+  opacity: 0.9;
+}
+.module-icon {
+  width: 84rpx;
+  height: 84rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #F6EFE6;
+  font-size: 40rpx;
+  flex-shrink: 0;
+}
+.module-label {
+  margin-top: 16rpx;
+  max-width: 100%;
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #2C1810;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.module-desc {
+  margin-top: 8rpx;
+  max-width: 100%;
+  font-size: 22rpx;
+  color: #8B7A6A;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ---- 骨架屏 ---- */
+.module-skeleton {
+  box-shadow: none;
+}
+.sk {
+  background: #EDE3D6;
+  border-radius: 10rpx;
+}
+.sk-circle {
+  width: 84rpx;
+  height: 84rpx;
+  border-radius: 50%;
+  margin-bottom: 16rpx;
+}
+.sk-line {
+  height: 24rpx;
+  margin-top: 12rpx;
+}
+.w-70 { width: 70%; }
+.w-40 { width: 40%; }
+
+/* ---- 错误 / 空状态 ---- */
+.error-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20rpx;
+  margin-top: 32rpx;
+  padding: 22rpx 24rpx;
+  border-radius: 14rpx;
+  background: #FDEAEA;
+  color: #C0392B;
+  font-size: 24rpx;
+}
+.error-text {
+  flex: 1;
+  min-width: 0;
+}
+.error-retry {
+  flex-shrink: 0;
+  color: #C67B30;
+  font-weight: 700;
+  padding: 4rpx 0 4rpx 16rpx;
+}
+.link-hover { opacity: 0.7; }
+.empty {
+  padding: 80rpx 0;
+  text-align: center;
+  color: #B6A996;
+  font-size: 26rpx;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}