qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 界面功能优化，完成基础信息和心路历程优化。

Browse Source
This commit is contained in:
tianyongbao
2025-11-13 02:05:38 +08:00
parent 6231c2494f
commit f4b0366a39
29 changed files with 4327 additions and 1651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/pages/work/heartJourney/details.vue
View File

@@ -6,13 +6,40 @@
title="心路历程详情"
>
</u-navbar>
<view class="section">
<u-cell-group>
<u-cell title="标题:" titleStyle="font-weight:bolder" :value="detailInfo.name"></u-cell>
<u-cell title="类型:" titleStyle="font-weight:bolder" :value="detailInfo.type"></u-cell>
<u-cell title="记录时间:" titleStyle="font-weight:bolder" :value="detailInfo.createTime"></u-cell>
<u-cell title="内容:" titleStyle="font-weight:bolder" center :value="detailInfo.remark"> </u-cell>
</u-cell-group>
<view class="detail-card">
<view class="card-header">
<view class="card-title">
<uni-icons type="heart" size="24" color="#fff"></uni-icons>
<text class="card-name">{{ detailInfo.name }}</text>
</view>
</view>
<view class="section">
<view class="section-title">
<view class="title-icon"></view>
<text>基本信息</text>
</view>
<view class="info-grid">
<view class="info-item">
<text class="info-label">类型</text>
<text class="info-value">{{ detailInfo.type || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">记录时间</text>
<text class="info-value">{{ detailInfo.createTime || '-' }}</text>
</view>
</view>
</view>
<view class="section" v-if="detailInfo.remark">
<view class="section-title">
<view class="title-icon"></view>
<text>内容</text>
</view>
<view class="remark-content">
<text>{{ detailInfo.remark }}</text>
</view>
</view>
</view>
<u-toast ref="uToast"></u-toast>
</view>
@@ -53,39 +80,86 @@ onLoad((option) => {
</script>
<style lang="scss" scoped>
.section {
.detail-card {
margin: 24rpx;
padding: 16rpx 24rpx;
background-color: #fff;
border-radius: 8rpx;
.section-title {
width: 280rpx;
color: #333333;
line-height: 44rpx;
font-size: 30rpx;
border-left: 6rpx solid #2681FF;
padding-left: 26rpx;
}
.content {
width: 647rpx;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: left;
}
.img-con {
border-radius: 12rpx;
overflow: hidden;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
.card-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 32rpx;
display: flex;
flex-wrap: wrap;
gap: 20rpx
justify-content: space-between;
align-items: center;
.card-title {
display: flex;
align-items: center;
gap: 12rpx;
.card-name {
color: #fff;
font-size: 36rpx;
font-weight: bold;
}
}
}
.form-view {
padding: 20rpx 0rpx 0 10rpx;
.form-btn {
padding-top: 20rpx;
.section {
padding: 32rpx;
border-bottom: 1rpx solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.section-title {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 24rpx;
font-size: 32rpx;
font-weight: bold;
color: #333;
.title-icon {
width: 6rpx;
height: 32rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
}
}
.info-grid {
display: flex;
flex-direction: column;
gap: 24rpx;
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
.info-label {
font-size: 28rpx;
color: #999;
}
.info-value {
font-size: 28rpx;
color: #333;
font-weight: 500;
}
}
}
.remark-content {
font-size: 28rpx;
color: #666;
line-height: 1.6;
text-align: justify;
}
}
}