'首页和商品详情页初稿'

2026-08-21 19:02:35 +08:00
parent 75135effde
commit d53bde57b6
29 changed files with 3694 additions and 3085 deletions
@@ -0,0 +1,137 @@
+<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>