97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
<template>
|
||
<!-- 产品信息：名称 / 国家 / 发货时效 / 价格 -->
|
||
<view class="info-wrap">
|
||
<!-- 产品名称 18px Bold #1A1A1A -->
|
||
<text class="name">{{ info.name }}</text>
|
||
|
||
<!-- 国家 + 发货时效 同行 12px #979797，值黑色 -->
|
||
<view class="meta-row">
|
||
<view class="meta-item">
|
||
<text class="meta-label">国家: </text>
|
||
<text class="meta-value">{{ info.country }}</text>
|
||
</view>
|
||
<view class="meta-item">
|
||
<text class="meta-label">发货时效: </text>
|
||
<text class="meta-value">{{ info.shipTime }}</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>
|
||
</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 */
|
||
}
|
||
|
||
/* 国家 / 发货时效 同行 */
|
||
.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;
|
||
}
|
||
</style>
|