149 lines
3.4 KiB
Vue
149 lines
3.4 KiB
Vue
<template>
|
||
<!-- 包装规格表 - Figma 1544:530 对应节点 -->
|
||
<!-- 4 列：尺码 / 尺寸(L*W*H) / 体积(L*W*H) / 重量(g) -->
|
||
<!-- 表头:bg #DFDFDF 高度 40px 圆角 6px 文字13px 居中 -->
|
||
<!-- 数据行:bg #F7F7F7 高度 60px -->
|
||
<view class="pack-wrap">
|
||
<view class="header-row">
|
||
<text class="title">包装规格</text>
|
||
</view>
|
||
|
||
<view class="table">
|
||
<!-- 表头 -->
|
||
<view class="row header">
|
||
<text
|
||
class="cell"
|
||
v-for="(col, index) in data.columns"
|
||
:key="'h-' + index"
|
||
>{{ col }}</text>
|
||
</view>
|
||
|
||
<!-- 数据行：按尺码聚合，每行一个尺码 -->
|
||
<view
|
||
class="row data-row"
|
||
v-for="(row, index) in data.rows"
|
||
:key="'r-' + index"
|
||
>
|
||
<!-- 尺码列：单行居中 13px -->
|
||
<view class="cell size-cell">
|
||
<text class="size-text">{{ row.size }}</text>
|
||
</view>
|
||
|
||
<!-- 尺寸列：cm 上 / in 下，双行 10px opacity 0.6 -->
|
||
<view class="cell dual-cell">
|
||
<text class="dual-top">{{ row.dimension.cm }}</text>
|
||
<text class="dual-bottom">{{ row.dimension.in }}</text>
|
||
</view>
|
||
|
||
<!-- 体积列：cm 上 / in 下 -->
|
||
<view class="cell dual-cell">
|
||
<text class="dual-top">{{ row.volume.cm }}</text>
|
||
<text class="dual-bottom">{{ row.volume.in }}</text>
|
||
</view>
|
||
|
||
<!-- 重量列：g 上 / lb 下 -->
|
||
<view class="cell dual-cell">
|
||
<text class="dual-top">{{ row.weight.cm }}</text>
|
||
<text class="dual-bottom">{{ row.weight.in }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'PackagingSpec',
|
||
props: {
|
||
data: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 外层 - padding 15px 10px 白底 */
|
||
.pack-wrap {
|
||
padding: 30rpx 20rpx;
|
||
background: #ffffff;
|
||
}
|
||
|
||
/* 标题行 */
|
||
.header-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx; /* 10px */
|
||
}
|
||
.title {
|
||
font-size: 29rpx; /* 15px Medium */
|
||
font-weight: 500;
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
}
|
||
/* 表格：列间距 4px（gap 8rpx） */
|
||
.table {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
/* 单行 - 圆角 6px（12rpx），两端对齐 */
|
||
.row {
|
||
display: flex;
|
||
border-radius: 12rpx;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
/* 表头：高度 40px（80rpx），背景 #DFDFDF，文字 13px 居中 */
|
||
.row.header {
|
||
height: 80rpx;
|
||
background: #dfdfdf;
|
||
}
|
||
/* 数据行：高度 60px（120rpx），背景 #F7F7F7 */
|
||
.row.data-row {
|
||
height: 120rpx;
|
||
background: #f7f7f7;
|
||
}
|
||
|
||
/* 4 列等宽，flex:1 均分 + 居中 */
|
||
.cell {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 表头文字 - 13px Medium 黑色 */
|
||
.row.header .cell {
|
||
font-size: 25rpx;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 尺码列文字 - 13px Medium 黑色 */
|
||
.size-text {
|
||
font-size: 25rpx;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
}
|
||
|
||
/* 双单位单元格 gap 4px */
|
||
.dual-cell {
|
||
gap: 4rpx; /* 2px Figma 行间距 17-10=7 实际渲染用 4rpx 贴合 */
|
||
}
|
||
.dual-top,
|
||
.dual-bottom {
|
||
font-size: 20rpx; /* 10px Medium Figma */
|
||
font-weight: 500;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 33rpx; /* 17px */
|
||
}
|
||
</style>
|