时舟年
134 lines
6.3 KiB
Vue
134 lines
6.3 KiB
Vue
<template>
|
||
<view class="body-report-section">
|
||
<view class="body-report-section__inner">
|
||
<view class="body-report-section__header">
|
||
<view class="body-report-section__header-inner">
|
||
<text class="body-report-section__title">体测报告</text>
|
||
<view
|
||
class="body-report-section__link"
|
||
hover-class="mi-tap--hover"
|
||
:hover-stay-time="150"
|
||
@tap="$emit('view-history')"
|
||
>
|
||
<text class="body-report-section__history-link">历史记录</text>
|
||
<image
|
||
class="body-report-section__link-arrow"
|
||
src="/static/images/chevronright3.png"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__card">
|
||
<view class="body-report-section__card-inner">
|
||
<view class="body-report-section__card-head">
|
||
<view class="body-report-section__card-head-inner">
|
||
<text class="body-report-section__desc">
|
||
最新数据 · {{ report.date }}
|
||
</text>
|
||
<view
|
||
class="body-report-section__view-btn"
|
||
hover-class="mi-tap-btn--hover"
|
||
:hover-stay-time="150"
|
||
@tap="$emit('view-report')"
|
||
>
|
||
<image
|
||
class="body-report-section__view-icon"
|
||
src="/static/images/filetext.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<text class="body-report-section__view-report">查看报告</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__metrics">
|
||
<view class="body-report-section__metrics-inner">
|
||
<view class="body-report-section__metric">
|
||
<view class="body-report-section__metric-inner">
|
||
<text class="body-report-section__text">{{ report.weight }}</text>
|
||
<text class="body-report-section__metric-value">体重(kg)</text>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__metric-divider"></view>
|
||
<view class="body-report-section__metric">
|
||
<view class="body-report-section__metric-inner">
|
||
<text class="body-report-section__text-2">{{ report.bmi }}</text>
|
||
<text class="body-report-section__text-3">BMI</text>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__metric-divider"></view>
|
||
<view class="body-report-section__metric">
|
||
<view class="body-report-section__metric-inner">
|
||
<text class="body-report-section__text-4">{{ report.bodyFat }}</text>
|
||
<text class="body-report-section__metric-label">体脂率</text>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__metric-divider"></view>
|
||
<view class="body-report-section__metric">
|
||
<view class="body-report-section__metric-inner">
|
||
<text class="body-report-section__num">{{ report.bmr }}</text>
|
||
<text class="body-report-section__text-5">BMR</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="body-report-section__summary">
|
||
<view class="body-report-section__summary-inner">
|
||
<view class="body-report-section__goal">
|
||
<image
|
||
class="body-report-section__goal-icon"
|
||
src="/static/images/target.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<text class="body-report-section__goal-text">
|
||
状态：{{ report.status }}
|
||
</text>
|
||
</view>
|
||
<view class="body-report-section__change">
|
||
<image
|
||
class="body-report-section__change-icon"
|
||
src="/static/images/trendingdown.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<text class="body-report-section__metric-value-2">
|
||
较上次 {{ report.change }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
options: {
|
||
virtualHost: false,
|
||
styleIsolation: 'apply-shared'
|
||
},
|
||
props: {
|
||
report: {
|
||
type: Object,
|
||
default: () => ({
|
||
date: '2024-07-01',
|
||
weight: '63.5',
|
||
bmi: '22.1',
|
||
bodyFat: '24.8%',
|
||
bmr: '165',
|
||
status: '比较健康',
|
||
change: '-1.2kg'
|
||
})
|
||
}
|
||
},
|
||
emits: ['view-history', 'view-report']
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
||
@import '@/common/style/memberInfo/member-info-body-report.css';
|
||
@import '@/common/style/memberInfo/member-info-tap.css';
|
||
</style>
|