You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
3.3 KiB
163 lines
3.3 KiB
<!--体测记录卡片组件-->
|
|
<template>
|
|
<view class="fitness-record-card">
|
|
<view class="record-header">
|
|
<view class="record-date">{{ record.test_date }}</view>
|
|
<view class="record-status">已完成</view>
|
|
</view>
|
|
|
|
<view class="record-data">
|
|
<view class="data-item">
|
|
<view class="data-label">身高</view>
|
|
<view class="data-value">{{ record.height }}cm</view>
|
|
</view>
|
|
<view class="data-item">
|
|
<view class="data-label">体重</view>
|
|
<view class="data-value">{{ record.weight }}kg</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="record-files" v-if="record.pdf_files && record.pdf_files.length > 0">
|
|
<view class="files-title">体测报告</view>
|
|
<view class="file-list">
|
|
<view
|
|
class="file-item"
|
|
v-for="pdf in record.pdf_files"
|
|
:key="pdf.id"
|
|
@click="handleFileClick(pdf)"
|
|
>
|
|
<view class="file-icon">📄</view>
|
|
<view class="file-info">
|
|
<view class="file-name">{{ pdf.name }}</view>
|
|
<view class="file-size">{{ $util.formatFileSize(pdf.size) }}</view>
|
|
</view>
|
|
<view class="file-action">
|
|
<text class="action-text">查看</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'FitnessRecordCard',
|
|
props: {
|
|
record: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
methods: {
|
|
handleFileClick(file) {
|
|
this.$emit('file-click', { file, record: this.record })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.fitness-record-card {
|
|
background-color: #1a1a1a;
|
|
border-radius: 15rpx;
|
|
padding: 25rpx;
|
|
margin-bottom: 20rpx;
|
|
border: 1rpx solid #333;
|
|
}
|
|
|
|
.record-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.record-date {
|
|
color: white;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.record-status {
|
|
color: #29d3b4;
|
|
font-size: 22rpx;
|
|
background-color: rgba(41, 211, 180, 0.2);
|
|
padding: 6rpx 15rpx;
|
|
border-radius: 15rpx;
|
|
}
|
|
}
|
|
|
|
.record-data {
|
|
display: flex;
|
|
gap: 40rpx;
|
|
margin-bottom: 25rpx;
|
|
|
|
.data-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
.data-label {
|
|
color: #999;
|
|
font-size: 22rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.data-value {
|
|
color: white;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.record-files {
|
|
.files-title {
|
|
color: white;
|
|
font-size: 24rpx;
|
|
margin-bottom: 15rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.file-list {
|
|
.file-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15rpx;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border-radius: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
.file-icon {
|
|
font-size: 32rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.file-info {
|
|
flex: 1;
|
|
|
|
.file-name {
|
|
color: white;
|
|
font-size: 24rpx;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.file-size {
|
|
color: #999;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
|
|
.file-action {
|
|
padding: 8rpx 15rpx;
|
|
background-color: #29d3b4;
|
|
border-radius: 15rpx;
|
|
|
|
.action-text {
|
|
color: white;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|