2025-09-17

项目-详情
This commit is contained in:
2025-09-17 11:10:34 +08:00
parent 33333e4882
commit f146ecf27b
5 changed files with 260 additions and 16 deletions

View File

@@ -48,9 +48,10 @@
}
},
{
"path": "pages/program/programDetail/programDetail",
"path": "pages/program/programDetail",
"style": {
"navigationBarTitleText": "项目详情"
"navigationBarTitleText": "项目详情",
"navigationStyle": "custom"
}
}
],

View File

@@ -136,7 +136,7 @@
}
const handleDetail = (item) => {
uni.navigateTo({
url: '/pages/program/programDetail/programDetail'
url: '/pages/program/programDetail'
})
}

View File

@@ -0,0 +1,256 @@
<template>
<view class="detail-contrainer">
<u-navbar title="项目详情" :background="{background: 'transparent' }" :border-bottom="false" back-icon-color="#fff"
title-color="#fff">
<template v-slot:right>
<image class="collection" src="/static/icon/Bookmark.png" mode=""></image>
</template>
</u-navbar>
<view class="head-text">
<view class="text-name">
xxxx工程
</view>
<view class="text-date">
起止时间2025/09/13-202512/12
</view>
<view class="text-progress">
项目进度
<u-line-progress :show-percent="false" class="progress-line" active-color="#65AD72" height="8"
:percent="70"></u-line-progress>
1980/2505
</view>
</view>
<view class="card u-m-t-10">
<u-row class="u-m-b-20">
<u-col span="6" class="card-name">所在地</u-col>
<u-col span="6" class="card-value">浙江-杭州</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" class="card-name">详细地址</u-col>
<u-col span="6" class="card-value">xx区xx路xxx号</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" class="card-name">联系人</u-col>
<u-col span="6" class="card-value">xxx</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" class="card-name">结算方式</u-col>
<u-col span="6" class="card-value">按月结算 次月支付60%</u-col>
</u-row>
<u-row>
<u-col span="6" class="card-name">项目企业</u-col>
<u-col span="6" class="card-value">xxxx公司</u-col>
</u-row>
</view>
<view class="card">
<view class="card-title">
<view class="icon">
<image style="width: 100%;height: 100%;" src="/static/icon/card-title-icon.png" mode=""></image>
</view>
项目需求<span>4</span>
</view>
<view class="card-body">
<u-row class="sub-title u-m-b-20">
<u-col span="12">需求名称</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" text-align="left" class="card-name">规格</u-col>
<u-col span="6" class="card-value">详情</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" text-align="left" class="card-name">限价</u-col>
<u-col span="6" class="card-value">详情</u-col>
</u-row>
<u-row class="u-m-b-20">
<u-col span="6" text-align="left" class="card-name">时间</u-col>
<u-col span="6" class="card-value">详情</u-col>
</u-row>
<u-row>
<u-col span="6" text-align="left" class="card-name">其他要求</u-col>
<u-col span="6" class="card-value">详情</u-col>
</u-row>
</view>
</view>
<view class="card">
<view class="card-title">
<view class="icon">
<image style="width: 100%;height: 100%;" src="/static/icon/card-title-icon.png" mode=""></image>
</view>
投资动态
</view>
<view class="card-body">
<u-row class="u-m-b-20">
<u-col span="6" text-align="left" class="card-name">发布时间</u-col>
<u-col span="6" class="card-value">2025-09-13</u-col>
</u-row>
<u-row>
<u-col span="6" text-align="left" class="card-name">参与单位</u-col>
<u-col span="6" class="card-value">5</u-col>
</u-row>
</view>
</view>
<u-row justify="flex-end" class="u-m-r-40 btn-group">
<u-col span="3"><u-button class="btn" type="primary">聊一聊</u-button></u-col>
<u-col span="3"><u-button class="btn" type="success">立刻融</u-button></u-col>
</u-row>
</view>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.detail-contrainer {
width: 100%;
height: 100vh;
background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
.collection {
width: 48rpx;
height: 48rpx;
margin-right: 24rpx;
}
.head-text {
color: #fff;
margin: 0 80rpx;
.text-name {
font-family: SF Pro;
font-weight: 400;
font-style: Regular;
font-size: 32rpx;
leading-trim: NONE;
line-height: 52rpx;
letter-spacing: 0%;
}
.text-date {
font-family: SF Pro;
font-weight: 400;
font-style: Regular;
font-size: 20rpx;
leading-trim: NONE;
line-height: 52rpx;
letter-spacing: 0%;
}
.text-progress {
font-family: SF Pro;
font-weight: 30;
font-style: Expanded Ultralight;
font-size: 20rpx;
leading-trim: NONE;
line-height: 52rpx;
letter-spacing: 0%;
display: flex;
align-items: center;
white-space: nowrap;
.progress-line {
margin: 0 10rpx;
}
}
}
.card {
margin: 0 40rpx 20rpx;
background-color: #fff;
padding: 20rpx;
border-radius: 20rpx;
.card-title {
display: flex;
align-items: center;
font-family: Work Sans;
font-weight: 400;
font-style: Regular;
font-size: 24rpx;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -2%;
color: #000;
.icon {
width: 38rpx;
height: 24rpx;
margin-right: 10rpx;
}
span {
font-family: Work Sans;
font-weight: 400;
font-style: Regular;
font-size: 24rpx;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -2%;
color: #8F8F8F;
}
}
.card-body {
margin-top: 20rpx;
background: #E9EEF8;
border-radius: 16rpx;
padding: 20rpx;
.sub-title {
font-family: Inter;
font-weight: 600;
font-style: Semi Bold;
font-size: 24rpx;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
}
}
.card-name {
font-family: Work Sans;
font-weight: 400;
font-style: Regular;
font-size: 20rpx;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -2%;
color: #8F8F8F;
}
.card-value {
font-family: Work Sans;
font-weight: 400;
font-style: Regular;
font-size: 20rpx;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -2%;
color: #2A2A2A;
}
}
.btn-group {
font-family: Work Sans;
font-weight: 400;
font-style: Regular;
font-size: 28rpx;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -2%;
.btn {
height: 56rpx;
}
}
}
</style>

View File

@@ -1,13 +0,0 @@
<template>
<view>
</view>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 685 B