138 lines
2.8 KiB
Vue
138 lines
2.8 KiB
Vue
<template>
|
||
<!-- 产品信息：名称 / SKU / 国家 / 价格 / 4 列快捷信息 -->
|
||
<view class="info-wrap">
|
||
<!-- 产品名称 18px Bold #1A1A1A -->
|
||
<text class="name">{{ info.name }}</text>
|
||
|
||
<!-- SKU + 国家 同行 12px #979797，值黑色 -->
|
||
<view class="meta-row">
|
||
<view class="meta-item">
|
||
<text class="meta-label">SKU: </text>
|
||
<text class="meta-value">{{ info.sku }}</text>
|
||
</view>
|
||
<view class="meta-item">
|
||
<text class="meta-label">国家: </text>
|
||
<text class="meta-value">{{ info.country }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 价格：￥ 和 .00 为 10px，整数 24px，全部红色 -->
|
||
<view class="price-row">
|
||
<text class="price-symbol">{{ info.price.symbol }}</text>
|
||
<text class="price-integer">{{ info.price.integer }}</text>
|
||
<text class="price-decimal">{{ info.price.decimal }}</text>
|
||
</view>
|
||
|
||
<!-- 分隔线 0.5px #F0F0F0 -->
|
||
<view class="divider"></view>
|
||
|
||
<!-- 4 列快捷信息：label 10px 灰，value 13px 黑 居中 -->
|
||
<view class="quick-info">
|
||
<view class="quick-col" v-for="(item, index) in info.quickInfo" :key="index">
|
||
<text class="quick-label">{{ item.label }}</text>
|
||
<text class="quick-value">{{ item.value }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'ProductInfo',
|
||
props: {
|
||
info: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.info-wrap {
|
||
padding: 20rpx 20rpx 24rpx; /* 10px 10px 12px */
|
||
background: #ffffff;
|
||
}
|
||
|
||
/* 产品名称 */
|
||
.name {
|
||
display: block;
|
||
font-size: 35rpx; /* 18px */
|
||
font-weight: 700;
|
||
color: #1a1a1a;
|
||
line-height: 50rpx; /* 26px */
|
||
}
|
||
|
||
/* SKU / 国家 同行 */
|
||
.meta-row {
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
}
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.meta-item + .meta-item {
|
||
margin-left: 20rpx;
|
||
}
|
||
.meta-label {
|
||
font-size: 23rpx; /* 12px */
|
||
color: #979797;
|
||
line-height: 33rpx;
|
||
}
|
||
.meta-value {
|
||
font-size: 23rpx;
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
}
|
||
|
||
/* 价格 */
|
||
.price-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-top: 16rpx;
|
||
}
|
||
.price-symbol,
|
||
.price-decimal {
|
||
font-size: 19rpx; /* 10px */
|
||
color: #ff0000;
|
||
font-weight: 700;
|
||
}
|
||
.price-integer {
|
||
font-size: 46rpx; /* 24px */
|
||
color: #ff0000;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 分隔线 */
|
||
.divider {
|
||
height: 1rpx; /* 0.5px */
|
||
background: #f0f0f0;
|
||
margin-top: 26rpx; /* 13px 间隙 */
|
||
}
|
||
|
||
/* 4 列快捷信息 */
|
||
.quick-info {
|
||
display: flex;
|
||
margin-top: 20rpx; /* 10px */
|
||
}
|
||
.quick-col {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
.quick-label {
|
||
font-size: 19rpx; /* 10px */
|
||
color: #979797;
|
||
line-height: 27rpx;
|
||
}
|
||
.quick-value {
|
||
font-size: 25rpx; /* 13px */
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
}
|
||
</style>
|