feat: 新增特价好车和最新上架页面功能

添加特价好车和最新上架两个新页面，包含以下主要变更：
1. 新增页面路由配置
2. 实现车辆列表展示、筛选和收藏功能
3. 优化页面样式和交互体验
4. 添加页面间导航逻辑

 /*
 /*
  * @Date: 2025-06-28 10:33:00
  * @Date: 2025-06-28 10:33:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-02 18:16:09
+ * @LastEditTime: 2025-07-02 22:18:10
  * @FilePath: /jgdl/src/app.config.js
  * @FilePath: /jgdl/src/app.config.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -16,6 +16,8 @@ export default {
     'pages/register/index',
     'pages/register/index',
     'pages/authCar/index',
     'pages/authCar/index',
     'pages/setAuthCar/index',
     'pages/setAuthCar/index',
+    'pages/newCarList/index',
+    'pages/goodCarList/index',
     'pages/auth/index',
     'pages/auth/index',
   ],
   ],
   subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
   subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去

+/*
+ * @Date: 2025-07-02 22:18:16
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-07-02 23:00:27
+ * @FilePath: /jgdl/src/pages/goodCarList/index.config.js
+ * @Description: 文件描述
+ */
+export default {
+  navigationBarTitleText: '',
+  usingComponents: {
+  },
+}

+/* 特价好车页面样式 */
+.good-car-list {
+  width: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 车辆卡片样式 */
+.good-car-list .bg-white {
+  background-color: #ffffff;
+  border: 1px solid #f0f0f0;
+  transition: all 0.3s ease;
+}
+
+.good-car-list .bg-white:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 图片容器 */
+.good-car-list .w-32 {
+  width: 200rpx;
+  height: 150rpx;
+  flex-shrink: 0;
+}
+
+.good-car-list image {
+  border-radius: 8rpx;
+  object-fit: cover;
+}
+
+/* 信息区域 */
+.good-car-list .flex-1 {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 价格样式 */
+.good-car-list .text-orange-500 {
+  color: #f97316;
+  font-weight: bold;
+}
+
+.good-car-list .line-through {
+  text-decoration: line-through;
+}
+
+/* 特价标签 */
+.good-car-list .text-red-600 {
+  color: #dc2626;
+  font-weight: 500;
+}
+
+/* 折扣标签 */
+.good-car-list .bg-red-500 {
+  background-color: #ef4444;
+  padding: 2rpx 6rpx;
+  border-radius: 4rpx;
+  font-size: 20rpx;
+  line-height: 1;
+}
+
+/* 加载状态 */
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 32rpx 0 100rpx 0;
+}
+
+.loading-text {
+  color: #9ca3af;
+  font-size: 28rpx;
+}
+
+/* 无更多数据提示 */
+.no-more-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 32rpx 0 100rpx 0;
+}
+
+.no-more-container text {
+  color: #9ca3af;
+  font-size: 24rpx;
+}
+
+/* NutUI 组件样式覆盖 */
+:deep(.nut-menu) {
+  background-color: #ffffff;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+:deep(.nut-menu-item) {
+  color: #333333;
+  font-size: 28rpx;
+}
+
+:deep(.nut-menu-item.active) {
+  color: #f97316;
+}
+
+// .nut-searchbar{
+//   background: transparent !important;
+// }
+
+// :deep(.nut-searchbar .nut-searchbar__input-inner) {
+//   background-color: #ffffff;
+//   border-radius: 20rpx;
+//   font-size: 28rpx;
+// }
+
+:deep(.nut-sticky) {
+  z-index: 999;
+}
+
+/* 响应式适配 */
+@media screen and (max-width: 750rpx) {
+  .good-car-list .w-32 {
+    width: 180rpx;
+    height: 135rpx;
+  }
+
+  .good-car-list .text-xl {
+    font-size: 32rpx;
+  }
+
+  .good-car-list .text-sm {
+    font-size: 24rpx;
+  }
+
+  .good-car-list .text-xs {
+    font-size: 20rpx;
+  }
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .good-car-list .bg-white {
+    background-color: #1f2937;
+    border-color: #374151;
+  }
+
+  .good-car-list .text-gray-600 {
+    color: #9ca3af;
+  }
+
+  .good-car-list .text-gray-500 {
+    color: #6b7280;
+  }
+
+  .good-car-list .text-gray-400 {
+    color: #9ca3af;
+  }
+}
+
+/* 动画效果 */
+.good-car-list .bg-white {
+  animation: fadeInUp 0.3s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 收藏按钮动画 */
+.good-car-list .absolute {
+  transition: transform 0.2s ease;
+}
+
+.good-car-list .absolute:active {
+  transform: scale(0.9);
+}
+
+/* 卡片点击效果 */
+.good-car-list .bg-white:active {
+  transform: scale(0.98);
+  transition: transform 0.1s ease;
+}
+
+/* 滚动条样式 */
+.good-car-list::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}
+
+/* 特价标识样式优化 */
+.good-car-list .absolute.bottom-3.right-3 {
+  background: linear-gradient(45deg, #ef4444, #dc2626);
+  box-shadow: 0 2rpx 4rpx rgba(239, 68, 68, 0.3);
+}
+
+.good-car-list .absolute.top-3.left-3 {
+  background: linear-gradient(45deg, #ef4444, #dc2626);
+  box-shadow: 0 2rpx 4rpx rgba(239, 68, 68, 0.3);
+}
+
+/* 价格区域样式优化 */
+.good-car-list .flex.items-center {
+  align-items: baseline;
+  gap: 8rpx;
+}
+
+/* 文字省略 */
+.good-car-list .font-medium {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* 间距调整 */
+.good-car-list .space-y-4 > * + * {
+  margin-top: 16rpx;
+}
+
+.good-car-list .mb-3 {
+  margin-bottom: 12rpx;
+}

 <!--
 <!--
  * @Date: 2025-06-28 10:33:00
  * @Date: 2025-06-28 10:33:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-02 20:49:05
+ * @LastEditTime: 2025-07-02 22:58:32
  * @FilePath: /jgdl/src/pages/index/index.vue
  * @FilePath: /jgdl/src/pages/index/index.vue
  * @Description: 捡个电驴首页
  * @Description: 捡个电驴首页
 -->
 -->
@@ -40,13 +40,13 @@
     <!-- Category Icons -->
     <!-- Category Icons -->
     <view class="px-4 mt-2">
     <view class="px-4 mt-2">
       <view class="flex justify-around py-4">
       <view class="flex justify-around py-4">
-        <view class="flex flex-col items-center">
+        <view class="flex flex-col items-center" @tap="onNewCarClick">
           <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
           <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
             <Clock size="20" color="#f97316" />
             <Clock size="20" color="#f97316" />
           </view>
           </view>
           <text class="text-xs mt-1 text-gray-700">最新上架</text>
           <text class="text-xs mt-1 text-gray-700">最新上架</text>
         </view>
         </view>
-        <view class="flex flex-col items-center">
+        <view class="flex flex-col items-center" @tap="onGoodCarClick">
           <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
           <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
             <Star size="20" color="#f97316" />
             <Star size="20" color="#f97316" />
           </view>
           </view>
@@ -111,7 +111,7 @@
     <view class="px-4 mt-6 mb-20">
     <view class="px-4 mt-6 mb-20">
       <view class="flex justify-between items-center mb-2">
       <view class="flex justify-between items-center mb-2">
         <text class="text-lg font-medium">最新上架</text>
         <text class="text-lg font-medium">最新上架</text>
-        <view class="text-sm text-gray-500 flex items-center">
+        <view class="text-sm text-gray-500 flex items-center" @tap="onNewCarClick">
           <text>更多</text>
           <text>更多</text>
           <RectRight size="12" />
           <RectRight size="12" />
         </view>
         </view>
@@ -295,6 +295,21 @@ const onCertifiedClick = () => {
   })
   })
 }
 }
 
 
+/**
+ * 点击特价好车
+ */
+const onGoodCarClick = () => {
+  Taro.navigateTo({
+    url: '/pages/goodCarList/index'
+  })
+}
+
+const onNewCarClick = () => {
+  Taro.navigateTo({
+    url: '/pages/newCarList/index'
+  })
+}
+
 // 生命周期钩子
 // 生命周期钩子
 useDidShow(() => {
 useDidShow(() => {
   console.warn('index onShow')
   console.warn('index onShow')

+/*
+ * @Date: 2025-07-02 22:16:48
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-07-02 22:17:11
+ * @FilePath: /jgdl/src/pages/newCarList/index.config.js
+ * @Description: 文件描述
+ */
+export default {
+  navigationBarTitleText: '',
+  usingComponents: {
+  },
+}

+/* 最新上架页面样式 */
+.new-car-list {
+  width: 100%;
+  box-sizing: border-box;
+  
+  /* 滚动条样式 */
+  &::-webkit-scrollbar {
+    width: 6rpx;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3rpx;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3rpx;
+    
+    &:hover {
+      background: #a8a8a8;
+    }
+  }
+}
+
+/* 车辆卡片样式 */
+.new-car-list .bg-white {
+  background-color: #ffffff;
+  border: 1px solid #f0f0f0;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  margin-bottom: 24rpx;
+  transition: all 0.3s ease;
+}
+
+.new-car-list .bg-white:hover {
+  transform: translateY(-2rpx);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
+  border-color: #e5e7eb;
+}
+
+.new-car-list .bg-white:active {
+  transform: scale(0.98);
+  transition: transform 0.1s ease;
+}
+
+/* 车辆图片容器 */
+.new-car-list .w-32 {
+  width: 200rpx;
+  height: 150rpx;
+  flex-shrink: 0;
+}
+
+.new-car-list image {
+  border-radius: 12rpx;
+  object-fit: cover;
+}
+
+/* 新车标识样式优化 */
+.new-car-list .absolute.bottom-3.right-3 {
+  background: linear-gradient(45deg, #ef4444, #dc2626);
+  box-shadow: 0 2rpx 4rpx rgba(239, 68, 68, 0.3);
+  border-radius: 8rpx;
+  padding: 4rpx 8rpx;
+  font-size: 20rpx;
+  font-weight: 600;
+}
+
+/* 车辆信息区域 */
+.new-car-list .flex-1 {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 收藏按钮样式 */
+.new-car-list .absolute {
+  transition: transform 0.2s ease;
+}
+
+.new-car-list .absolute:active {
+  transform: scale(0.9);
+}
+
+/* 价格样式 */
+.new-car-list .text-orange-500 {
+  color: #f97316;
+  font-weight: bold;
+}
+
+/* 上架时间样式 */
+.new-car-list .text-green-600 {
+  color: #10b981;
+  font-weight: 500;
+}
+
+/* 文字省略 */
+.new-car-list .font-medium {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 加载状态样式 */
+.loading-container {
+  padding: 32rpx 0 100rpx 0; /* 增加底部间距避免被TabBar遮挡 */
+  text-align: center;
+  
+  .loading-text {
+    color: #9ca3af;
+    font-size: 28rpx;
+  }
+}
+
+/* 无更多数据样式 */
+.no-more-container {
+  padding: 32rpx 0 100rpx 0; /* 增加底部间距避免被TabBar遮挡 */
+  text-align: center;
+  
+  text {
+    color: #d1d5db;
+    font-size: 24rpx;
+  }
+}
+
+/* 动画效果 */
+.new-car-list .bg-white {
+  animation: fadeInUp 0.3s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式适配 */
+@media screen and (max-width: 750rpx) {
+  .new-car-list .w-32 {
+    width: 180rpx;
+    height: 135rpx;
+  }
+
+  .new-car-list .text-xl {
+    font-size: 32rpx;
+  }
+
+  .new-car-list .text-sm {
+    font-size: 24rpx;
+  }
+
+  .new-car-list .text-xs {
+    font-size: 20rpx;
+  }
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .new-car-list .bg-white {
+    background-color: #1f2937;
+    border-color: #374151;
+  }
+
+  .new-car-list .text-gray-600 {
+    color: #9ca3af;
+  }
+
+  .new-car-list .text-gray-500 {
+    color: #6b7280;
+  }
+
+  .new-car-list .text-gray-400 {
+    color: #9ca3af;
+  }
+}
+
+/* NutUI组件样式覆盖 */
+:deep(.nut-sticky) {
+  z-index: 999;
+}
+
+:deep(.nut-searchbar) {
+  .nut-searchbar__content {
+    border-radius: 50rpx;
+    background: #fff;
+    
+    .nut-searchbar__input {
+      font-size: 28rpx;
+      color: #374151;
+      
+      &::placeholder {
+        color: #9ca3af;
+      }
+    }
+  }
+}
+
+:deep(.nut-menu) {
+  background: #fff;
+  border-bottom: 1rpx solid #e5e7eb;
+  
+  .nut-menu__item {
+    font-size: 28rpx;
+    color: #374151;
+    
+    &.active {
+      color: #f97316;
+    }
+  }
+  
+  .nut-menu__title {
+    font-size: 28rpx;
+    
+    &::after {
+      border-color: #9ca3af;
+    }
+  }
+}
+
+:deep(.nut-toast) {
+  .nut-toast__inner {
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    border-radius: 16rpx;
+    font-size: 28rpx;
+  }
+}
+
+/* 响应式适配 */
+@media (max-width: 750rpx) {
+  .car-image-container {
+    width: 200rpx;
+    height: 150rpx;
+    padding: 12rpx;
+  }
+  
+  .car-info {
+    padding: 20rpx;
+    
+    .car-name {
+      font-size: 26rpx;
+    }
+    
+    .car-details {
+      font-size: 22rpx;
+    }
+    
+    .car-price {
+      font-size: 28rpx;
+    }
+    
+    .car-school {
+      font-size: 20rpx;
+    }
+    
+    .listing-time {
+      font-size: 20rpx;
+    }
+  }
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .car-card {
+    background: #1f2937;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+    
+    &:hover {
+      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
+    }
+  }
+  
+  .car-info {
+    .car-name {
+      color: #f9fafb;
+    }
+    
+    .car-details {
+      color: #d1d5db;
+    }
+    
+    .car-school {
+      color: #9ca3af;
+    }
+  }
+  
+  .loading-container .loading-text {
+    color: #6b7280;
+  }
+  
+  .no-more-container text {
+    color: #4b5563;
+  }
+}

+// Post页面样式
+.post-page {
+  // 车辆卡片样式
+  .vehicle-list {
+    // 图片容器尺寸优化
+    .w-32 {
+      width: 200rpx !important;
+      height: 150rpx !important;
+    }
+    
+    // 卡片样式增强
+    .bg-white {
+      border: 1px solid #f0f0f0;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      transition: all 0.3s ease;
+      
+      &:hover {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+        transform: translateY(-2px);
+      }
+      
+      &:active {
+        transform: translateY(0);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      }
+    }
+    
+    // 收藏按钮样式
+    .absolute.top-2.right-2 {
+      transition: transform 0.2s ease;
+      
+      &:hover {
+        transform: scale(1.1);
+      }
+      
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+    
+    // 价格样式优化
+    .text-orange-500 {
+      color: #f97316;
+      font-weight: 700;
+    }
+    
+    // 认证标识样式
+    .bg-orange-500 {
+      background: linear-gradient(135deg, #f97316, #ea580c);
+      box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
+    }
+    
+    // 文字省略
+    .font-medium {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  
+  // 精品推荐区域
+  .grid {
+    // 图片容器
+    .w-full.h-36 {
+      height: 280rpx;
+    }
+    
+    // 卡片样式
+    .bg-white {
+      border: 1px solid #f0f0f0;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      transition: all 0.3s ease;
+      
+      &:hover {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+        transform: translateY(-2px);
+      }
+    }
+  }
+  
+  // 加载状态样式
+  .load-more-container {
+    padding: 40rpx 0;
+    
+    .loading-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #666;
+      
+      .loading-spinner {
+        width: 40rpx;
+        height: 40rpx;
+        border: 4rpx solid #f3f3f3;
+        border-top: 4rpx solid #f97316;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-right: 16rpx;
+      }
+      
+      .loading-text {
+        font-size: 28rpx;
+        color: #666;
+      }
+    }
+    
+    .no-more-data {
+      text-align: center;
+      color: #999;
+      font-size: 28rpx;
+    }
+  }
+}
+
+// NutUI组件样式覆盖
+.nut-menu {
+  border-bottom: 1px solid #f0f0f0;
+  
+  .nut-menu-item {
+    font-size: 28rpx;
+    
+    &.active {
+      color: #f97316;
+    }
+  }
+}
+
+.nut-searchbar {
+  .nut-searchbar__input {
+    font-size: 28rpx;
+  }
+}
+
+.nut-button {
+  &[type="default"] {
+    border-color: #f97316;
+    color: #f97316;
+    
+    &:hover {
+      background-color: #f97316;
+      color: white;
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 750rpx) {
+  .post-page {
+    .vehicle-list {
+      .w-32 {
+        width: 180rpx !important;
+        height: 135rpx !important;
+      }
+    }
+    
+    .grid {
+      .w-full.h-36 {
+        height: 240rpx;
+      }
+    }
+    
+    .font-medium {
+      font-size: 26rpx;
+    }
+    
+    .text-xs {
+      font-size: 22rpx;
+    }
+  }
+}
+
+// 深色模式适配
+@media (prefers-color-scheme: dark) {
+  .post-page {
+    .bg-white {
+      background-color: #1f2937;
+      border-color: #374151;
+      color: #f9fafb;
+    }
+    
+    .text-gray-600 {
+      color: #9ca3af;
+    }
+    
+    .text-gray-500 {
+      color: #6b7280;
+    }
+  }
+}
+
+// 动画效果
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// 卡片进入动画
+.post-page .vehicle-list > .space-y-4 > view {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.post-page .grid > view {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  width: 8rpx;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4rpx;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4rpx;
+  
+  &:hover {
+    background: #a8a8a8;
+  }
+}
\ No newline at end of file

 <template>
 <template>
-    <view>
+    <view class="post-page">
         <view class="flex flex-col bg-white min-h-screen">
         <view class="flex flex-col bg-white min-h-screen">
             <!-- Header -->
             <!-- Header -->
             <nut-sticky>
             <nut-sticky>
@@ -44,7 +44,7 @@
                                 </view>
                                 </view>
                             </view>
                             </view>
                             <view class="flex-1 p-3 relative">
                             <view class="flex-1 p-3 relative">
-                                <view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter.id)">
+                                <view class="absolute top-3 right-4" @tap.stop="() => toggleFavorite(scooter.id)">
                                     <Addfollow v-if="!favoriteIds.includes(scooter.id)" size="16" color="#9ca3af" />
                                     <Addfollow v-if="!favoriteIds.includes(scooter.id)" size="16" color="#9ca3af" />
                                     <HeartFill v-else size="16" color="#ef4444" />
                                     <HeartFill v-else size="16" color="#ef4444" />
                                 </view>
                                 </view>
@@ -132,7 +132,7 @@
 <script setup>
 <script setup>
 import { ref } from 'vue'
 import { ref } from 'vue'
 import Taro from '@tarojs/taro'
 import Taro from '@tarojs/taro'
-import { Search2, Right, RectRight, Check, Addfollow, HeartFill } from '@nutui/icons-vue-taro'
+import { Search2, RectRight, Check, Addfollow, HeartFill } from '@nutui/icons-vue-taro'
 import TabBar from '@/components/TabBar.vue'
 import TabBar from '@/components/TabBar.vue'
 
 
 // 响应式数据
 // 响应式数据
@@ -393,6 +393,8 @@ const loadMoreData = async () => {
 </script>
 </script>
 
 
 <style lang="less">
 <style lang="less">
+@import './index.less';
+
 // 使用Tailwind CSS类，只保留必要的自定义样式
 // 使用Tailwind CSS类，只保留必要的自定义样式
 .space-y-4>view:not(:first-child) {
 .space-y-4>view:not(:first-child) {
     margin-top: 1rem;
     margin-top: 1rem;