Add immediate startup login and loading states for mini program home

2026-10-05 11:03:33 +08:00
parent 4916c31edd
commit 42aea10101
15 changed files with 623 additions and 44 deletions
@@ -0,0 +1,73 @@
+.bone {
+  background: linear-gradient(100deg, #f3e7dc 20%, #fff8ef 45%, #f3e7dc 70%);
+  background-size: 220% 100%;
+  animation: shimmer 1.6s ease-in-out infinite;
+  border-radius: 15rpx;
+}
+.hero-placeholder {
+  position: relative;
+  min-height: 330rpx;
+  background: #fff0e2;
+  border-radius: 38rpx;
+  padding: 45rpx 35rpx;
+  box-sizing: border-box;
+}
+.line {
+  height: 22rpx;
+  width: 65%;
+  margin: 24rpx 0;
+}
+.short {
+  width: 25%;
+}
+.title {
+  height: 38rpx;
+  width: 48%;
+}
+.art {
+  position: absolute;
+  right: 35rpx;
+  top: 62rpx;
+  width: 170rpx;
+  height: 190rpx;
+  border-radius: 40rpx;
+}
+.heading {
+  width: 230rpx;
+  height: 33rpx;
+  margin: 48rpx 0 28rpx;
+}
+.card-placeholder {
+  padding: 28rpx;
+  background: white;
+  border-radius: 35rpx;
+}
+.action {
+  height: 80rpx;
+  margin-top: 42rpx;
+  border-radius: 24rpx;
+}
+.stats-placeholder {
+  display: flex;
+  gap: 14rpx;
+  margin-top: 20rpx;
+}
+.stats-placeholder view {
+  height: 140rpx;
+  flex: 1;
+  border-radius: 28rpx;
+}
+.loading-copy {
+  text-align: center;
+  color: #a48d7e;
+  font-size: 22rpx;
+  margin-top: 32rpx;
+}
+@keyframes shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}