feat: 任务和社区页面

pages/garden/index.wxss

@@ -41,8 +41,8 @@
 }
 
 .banner-container {
-  margin: 0 40rpx 48rpx;
-  height: 280rpx;
+  margin: 0 40rpx 24rpx;
+  height: 220rpx;
   border-radius: 40rpx;
   overflow: hidden;
   position: relative;
@@ -124,10 +124,10 @@
   overflow: hidden;
 }
 
-.plant-image-container t-image {
+.plant-image-container .uploaded-img {
   width: 100%;
   height: 100%;
-  transition: transform 0.6s ease;
+  border-radius: 40rpx 40rpx 0 0;
 }
 
 .days-badge {
@@ -192,3 +192,154 @@
     transform: scale(0.92);
     box-shadow: 0 4rpx 16rpx rgba(85, 139, 47, 0.2);
 }
+/* List Footer */
+.list-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 32rpx 0;
+}
+
+.no-more-data {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    font-size: 24rpx;
+    color: #999;
+}
+
+.divider-line {
+    width: 60rpx;
+    height: 2rpx;
+    background: #E0E0E0;
+}
+
+/* Garden Empty State */
+.garden-empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 120rpx;
+  position: relative;
+  overflow: hidden;
+}
+
+.empty-sky-scene {
+  position: absolute;
+  top: 40rpx;
+  width: 100%;
+  height: 200rpx;
+}
+
+.sun-small {
+  position: absolute;
+  top: 20rpx;
+  right: 60rpx;
+  width: 80rpx;
+  height: 80rpx;
+  background: radial-gradient(circle, #FFF176 0%, #FDD835 100%);
+  border-radius: 50%;
+  box-shadow: 0 0 24rpx rgba(253, 216, 53, 0.4);
+}
+
+.cloud-small {
+  position: absolute;
+  top: 60rpx;
+  left: 40rpx;
+  width: 100rpx;
+  height: 36rpx;
+  background: #E1F5FE;
+  border-radius: 20rpx;
+  opacity: 0.7;
+  animation: cloudFloat 8s ease-in-out infinite alternate;
+}
+
+.empty-center-icon {
+  margin-bottom: 40rpx;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.emoji-sprout {
+  font-size: 120rpx;
+  line-height: 1;
+  position: relative;
+  z-index: 2;
+  animation: sproutSway 3s ease-in-out infinite;
+  transform-origin: bottom center;
+}
+
+.soil-base {
+  width: 100rpx;
+  height: 12rpx;
+  background: #EFEBE9;
+  border-radius: 50%;
+  margin-top: -10rpx;
+  z-index: 1;
+}
+
+.empty-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.msg-title {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #558B2F;
+}
+
+.msg-sub {
+  font-size: 28rpx;
+  color: #90A4AE;
+  font-weight: 500;
+}
+
+/* Guide Arrow Animation */
+.guide-arrow-box {
+  position: fixed;
+  bottom: 170rpx;
+  right: 80rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transform: rotate(-10deg);
+  z-index: 900;
+  pointer-events: none; /* Let touches pass through to underlying nav if needed */
+}
+
+.arrow-text {
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #558B2F;
+  margin-bottom: -8rpx;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 4rpx 12rpx;
+  border-radius: 12rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+}
+
+.bounce-arrow {
+  animation: bounceArrow 1.5s infinite;
+}
+
+@keyframes bounceArrow {
+  0%, 100% { transform: translateY(0) rotate(-15deg); }
+  50% { transform: translateY(10rpx) rotate(-15deg); }
+}
+
+@keyframes cloudFloat {
+  from { transform: translateX(0); }
+  to { transform: translateX(30rpx); }
+}
+
+@keyframes sproutSway {
+  0%, 100% { transform: rotate(-5deg); }
+  50% { transform: rotate(5deg); }
+}