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

2026-08-21 19:02:35 +08:00
parent 75135effde
commit d53bde57b6
29 changed files with 3694 additions and 3085 deletions
@@ -0,0 +1,138 @@
+<template>
+  <!-- Hero 首屏 - 设计稿风格 -->
+  <view class="hero">
+    <!-- 顶部 Logo -->
+    <view class="hero-logo">
+      <text class="logo-en">inkreach</text>
+      <text class="logo-cn">印美达全球</text>
+    </view>
+
+    <!-- 大标题 -->
+    <view class="hero-title">
+      <text class="title-main">全球POD供应链平台</text>
+    </view>
+
+    <!-- 副标题 -->
+    <text class="hero-subtitle">
+      连接设计、生产、订单与全球物流，助力跨境卖家快速上新、稳定履约
+    </text>
+
+    <!-- 4个指标 -->
+    <view class="hero-stats">
+      <view class="stat-item" v-for="(item, index) in stats" :key="index">
+        <text class="stat-value">{{ item.value }}</text>
+        <text class="stat-label">{{ item.label }}</text>
+      </view>
+    </view>
+
+    <!-- 地球背景图 -->
+    <view class="hero-earth">
+      <image
+        class="earth-img"
+        src="/static/images/home/Rectangle_178_1426_1248.png"
+        mode="widthFix"
+      ></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'HeroBanner',
+  props: {
+    stats: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hero {
+  position: relative;
+  width: 100%;
+  padding-top: 30rpx;
+  padding-bottom: 0;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+/* Logo */
+.hero-logo {
+  display: flex;
+  align-items: baseline;
+  padding: 0 32rpx;
+  margin-bottom: 40rpx;
+}
+.logo-en {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #ff6800;
+  letter-spacing: 1rpx;
+}
+.logo-cn {
+  margin-left: 12rpx;
+  font-size: 22rpx;
+  color: #ff6800;
+}
+
+/* 标题 - 设计稿 28px/400/黑色 */
+.hero-title {
+  padding: 0 32rpx;
+  margin-bottom: 16rpx;
+}
+.title-main {
+  font-size: 54rpx;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 1.3;
+}
+
+/* 副标题 - 设计稿 10px/400/#000000 */
+.hero-subtitle {
+  display: block;
+  padding: 0 32rpx;
+  font-size: 20rpx;
+  color: #999999;
+  line-height: 1.6;
+  margin-bottom: 36rpx;
+}
+
+/* 4个指标 - 设计稿 16px/400/#ff6800 */
+.hero-stats {
+  display: flex;
+  padding: 0 32rpx;
+  gap: 24rpx;
+  margin-bottom: 40rpx;
+}
+.stat-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.stat-value {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #ff6800;
+  line-height: 1.2;
+}
+.stat-label {
+  margin-top: 8rpx;
+  font-size: 20rpx;
+  color: #999999;
+}
+
+/* 地球图 - 全宽 */
+.hero-earth {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.earth-img {
+  width: 100%;
+  display: block;
+}
+</style>