118 lines
2.5 KiB
Vue
118 lines
2.5 KiB
Vue
<template>
|
||
<!-- 产品尺码表：5 列 × 4 行，交替行背景 -->
|
||
<view class="chart-wrap">
|
||
<view class="header-row">
|
||
<text class="title">产品尺码</text>
|
||
<!-- 单位小字：设计稿 1566-1160，11px Medium 黑 50%，与标题底对齐 -->
|
||
<text class="unit">单位：cm</text>
|
||
</view>
|
||
|
||
<view class="table">
|
||
<!-- 表头：bg #DFDFDF，圆角 6px -->
|
||
<view class="row header">
|
||
<text
|
||
class="cell"
|
||
v-for="(col, index) in data.columns"
|
||
:key="index"
|
||
>{{ col }}</text>
|
||
</view>
|
||
|
||
<!-- 数据行：偶数行（第 2、4 行）bg #F7F7F7，圆角 6px -->
|
||
<view
|
||
class="row"
|
||
:class="{ alt: (index + 1) % 2 === 0 }"
|
||
v-for="(row, index) in data.rows"
|
||
:key="index"
|
||
>
|
||
<text class="cell">{{ row.size }}</text>
|
||
<text class="cell">{{ row.shoulder }}</text>
|
||
<text class="cell">{{ row.chest }}</text>
|
||
<text class="cell">{{ row.length }}</text>
|
||
<text class="cell">{{ row.sleeve }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'SizeChart',
|
||
props: {
|
||
data: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.chart-wrap {
|
||
padding: 30rpx 20rpx; /* 15px 10px */
|
||
background: #ffffff;
|
||
}
|
||
|
||
/* 标题行：产品尺码（左） + 单位（右），按文字基线对齐（字下边界齐平） */
|
||
.header-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-bottom: 20rpx; /* 10px */
|
||
}
|
||
.title {
|
||
font-size: 29rpx; /* 15px */
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
}
|
||
/* 单位小字：紧接标题右侧（不靠右对齐），11px → 21rpx，行高 17px → 33rpx，黑色 50% 透明 */
|
||
.unit {
|
||
margin-left: 12rpx;
|
||
font-size: 21rpx;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
opacity: 0.5;
|
||
line-height: 33rpx;
|
||
}
|
||
/* 表格 */
|
||
.table {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx; /* 行间距 4px */
|
||
}
|
||
|
||
/* 单行 */
|
||
.row {
|
||
display: flex;
|
||
height: 77rpx; /* 40px */
|
||
align-items: center;
|
||
border-radius: 12rpx; /* 6px */
|
||
}
|
||
|
||
/* 表头行 */
|
||
.row.header {
|
||
background: #dfdfdf;
|
||
}
|
||
|
||
/* 偶数行（交替背景） */
|
||
.row.alt {
|
||
background: #f7f7f7;
|
||
}
|
||
|
||
/* 单元格：等宽分布 */
|
||
.cell {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 25rpx; /* 13px */
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
}
|
||
.row.header .cell {
|
||
color: #000000;
|
||
}
|
||
.row:not(.header) .cell {
|
||
opacity: 0.6;
|
||
}
|
||
.row:not(.header) .cell:first-child {
|
||
opacity: 1; /* 尺码列不透明 */
|
||
}
|
||
</style>
|