feat:首页部分页面

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

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { ProjectItem } from '@/types/home'
+
+defineProps<{
+  item: ProjectItem
+}>()
+</script>
+
+<template>
+  <view class="project-card">
+    <view class="project-card__header">
+      <text class="project-card__title">
+        {{ item.title }}
+      </text>
+      <text class="project-card__status">
+        {{ item.status }}
+      </text>
+    </view>
+
+    <view class="project-card__meta">
+      <text
+        class="project-card__tag"
+        :class="`project-card__tag--${item.tagTheme || 'orange'}`"
+      >
+        {{ 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>
+
+    <view class="project-card__progress-bar">
+      <view
+        class="project-card__progress-fill"
+        :style="{ width: `${item.progress}%` }"
+      />
+    </view>
+
+    <view class="project-card__footer">
+      <text class="project-card__time">
+        更新时间：{{ item.updateTime }}
+      </text>
+      <text class="project-card__detail">
+        查看详情 >
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.project-card {
+  padding: 28rpx;
+  margin-top: 20rpx;
+  background: $color-bg-page;
+  border-radius: 20rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
+}
+
+.project-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.project-card__title {
+  flex: 1;
+  padding-right: 16rpx;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.project-card__status {
+  flex-shrink: 0;
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.project-card__meta {
+  display: flex;
+  align-items: center;
+  margin-top: 16rpx;
+}
+
+.project-card__tag {
+  flex-shrink: 0;
+  padding: 4rpx 12rpx;
+  font-size: 20rpx;
+  border-radius: 6rpx;
+
+  &--orange {
+    color: $color-tag-orange;
+    background: $color-tag-orange-bg;
+  }
+
+  &--peach {
+    color: #e07b4a;
+    background: #fff0e8;
+  }
+}
+
+.project-card__no {
+  margin-left: 12rpx;
+  font-size: 22rpx;
+  color: $color-text-secondary;
+}
+
+.project-card__progress-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 24rpx;
+}
+
+.project-card__progress-label,
+.project-card__progress-value {
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.project-card__progress-bar {
+  height: 12rpx;
+  margin-top: 12rpx;
+  overflow: hidden;
+  background: #eef2ff;
+  border-radius: 6rpx;
+}
+
+.project-card__progress-fill {
+  height: 100%;
+  background: $color-primary;
+  border-radius: 6rpx;
+}
+
+.project-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20rpx;
+}
+
+.project-card__time {
+  font-size: 22rpx;
+  color: $color-text-secondary;
+}
+
+.project-card__detail {
+  font-size: 24rpx;
+  color: $color-text-link;
+}
+</style>