feat:首页完成

src/pages/home-index/components/ProjectCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ProjectItem } from '@/types/home'
+import cardBg from '@/static/icons/new-card.png'
 
 defineProps<{
   item: ProjectItem
@@ -8,6 +9,12 @@ defineProps<{
 
 <template>
   <view class="project-card">
+    <image
+      class="project-card__bg"
+      :src="cardBg"
+      mode="scaleToFill"
+    />
+    <view class="project-card__inner">
     <view class="project-card__header">
       <text class="project-card__title">
         {{ item.title }}
@@ -24,18 +31,14 @@ defineProps<{
       >
         {{ item.category }}
       </text>
-      <text class="project-card__no">
-        项目编号：{{ item.projectNo }}
-      </text>
-    </view>
-
-    <view class="project-card__progress-row">
-      <text class="project-card__progress-label">
-        进行中
-      </text>
-      <text class="project-card__progress-value">
-        {{ item.progress }}%
-      </text>
+      <view class="project-card__meta-info">
+        <text class="project-card__no">
+          项目编号：{{ item.projectNo }}
+        </text>
+        <text class="project-card__progress-value">
+          {{ item.progress }}%
+        </text>
+      </view>
     </view>
 
     <view class="project-card__progress-bar">
@@ -53,6 +56,7 @@ defineProps<{
         查看详情 >
       </text>
     </view>
+    </view>
   </view>
 </template>
 
@@ -60,11 +64,25 @@ defineProps<{
 @import '@/styles/variables.scss';
 
 .project-card {
-  padding: 28rpx;
+  position: relative;
   margin-top: 20rpx;
-  background: $color-bg-page;
+  overflow: hidden;
   border-radius: 20rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
+}
+
+.project-card__bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.project-card__inner {
+  position: relative;
+  z-index: 1;
+  padding: 28rpx;
 }
 
 .project-card__header {
@@ -93,45 +111,52 @@ defineProps<{
   margin-top: 16rpx;
 }
 
+.project-card__meta-info {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  margin-left: 12rpx;
+}
+
 .project-card__tag {
   flex-shrink: 0;
   padding: 4rpx 12rpx;
   font-size: 20rpx;
   border-radius: 6rpx;
+  font-weight: 500;
+  width: 100rpx;
+  text-align: center;
+  height: 20rpx;
+  line-height: 20rpx;
 
   &--orange {
-    color: $color-tag-orange;
-    background: $color-tag-orange-bg;
-  }
-
-  &--peach {
-    color: #e07b4a;
-    background: #fff0e8;
+    color: #875045;
+    background: #FFF1EA;
   }
 }
 
 .project-card__no {
-  margin-left: 12rpx;
+  flex: 1;
+  min-width: 0;
   font-size: 22rpx;
-  color: $color-text-secondary;
+  color: #666666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.project-card__progress-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 24rpx;
-}
-
-.project-card__progress-label,
 .project-card__progress-value {
+  flex-shrink: 0;
+  margin-left: 12rpx;
   font-size: 24rpx;
-  color: $color-text-secondary;
+  color: #666666;
 }
 
 .project-card__progress-bar {
   height: 12rpx;
-  margin-top: 12rpx;
+  margin-top: 24rpx;
   overflow: hidden;
   background: #eef2ff;
   border-radius: 6rpx;
@@ -152,11 +177,11 @@ defineProps<{
 
 .project-card__time {
   font-size: 22rpx;
-  color: $color-text-secondary;
+  color: #666666;
 }
 
 .project-card__detail {
   font-size: 24rpx;
-  color: $color-text-link;
+  color: #666666;
 }
 </style>