188 lines
3.4 KiB
Vue
188 lines
3.4 KiB
Vue
<script setup lang="ts">
|
||
import type { ProjectItem } from '@/types/home'
|
||
import cardBg from '@/static/icons/new-card.png'
|
||
|
||
defineProps<{
|
||
item: ProjectItem
|
||
}>()
|
||
</script>
|
||
|
||
<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 }}
|
||
</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>
|
||
<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">
|
||
<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>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/styles/variables.scss';
|
||
|
||
.project-card {
|
||
position: relative;
|
||
margin-top: 20rpx;
|
||
overflow: hidden;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.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 {
|
||
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__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: #875045;
|
||
background: #FFF1EA;
|
||
}
|
||
}
|
||
|
||
.project-card__no {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 22rpx;
|
||
color: #666666;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.project-card__progress-value {
|
||
flex-shrink: 0;
|
||
margin-left: 12rpx;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.project-card__progress-bar {
|
||
height: 12rpx;
|
||
margin-top: 24rpx;
|
||
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: #666666;
|
||
}
|
||
|
||
.project-card__detail {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
</style>
|