修改UI问题初

2026-08-31 17:37:32 +08:00
parent 585b30a615
commit 18ee29e422
16 changed files with 386 additions and 1070 deletions
@@ -1,11 +1,11 @@
 <template>
  <!-- 公司简介 + 底部CTA - Figma 1461:1606 + 1498:1769 -->
  <view class="company-section">
-    <!-- 背景图 - 模糊 + 0.5透明 -->
+    <!-- 背景图 - 设计师切图原图（UI-007），模糊 + 0.5透明 -->
    <view class="company-bg">
      <image
        class="bg-img"
-        src="/static/images/home/公司简介背景_1461_1606.png"
+        :src="bgUrl"
        mode="aspectFill"
      ></image>
    </view>
@@ -87,6 +87,8 @@
 </template>

 <script>
+import { buildUrl } from '@/api/request.js'
+
 export default {
  name: 'CompanyIntro',
  props: {
@@ -97,7 +99,9 @@ export default {
  },
  data() {
    return {
-      phone: '15999928161'
+      phone: '15999928161',
+      // 公司简介背景图 - 远程切图原图（保留切图原始文件名），UI-007
+      bgUrl: buildUrl('/assets/miniprogram/公司简介背景.png')
    }
  },
  methods: {
@@ -361,10 +365,10 @@ export default {
  flex-shrink: 0;
 }
 .phone-text {
-  font-size: 23rpx;      /* 12px → 23rpx */
+  font-size: 31rpx;      /* UI-008: 16号 → 31rpx */
  font-weight: 700;
  color: #ffffff;
-  line-height: 32rpx;
+  line-height: 38rpx;
 }
 /* 联系我们 - 用户提供的image.png */
 .cta-text-img {
@@ -4,20 +4,19 @@
    <!-- 渐变背景层 -->
    <view class="hero-gradient-bg"></view>

-    <!-- 地球背景图 (y:228, 390x390) -->
+    <!-- 地球背景图 (远程高清原图，UI-003) -->
    <view class="hero-earth">
      <image
        class="earth-img"
-        src="/static/images/home/Rectangle_178_1426_1248.png"
+        :src="heroImg"
        mode="aspectFill"
      ></image>
    </view>

-    <!-- 顶部 Logo 栏 (状态栏 + 双 logo) -->
+    <!-- 顶部 Logo 栏 (状态栏 + 单张完整logo，UI-001) -->
    <view class="hero-top-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="logo-wrap">
-        <image class="logo-en" src="/static/icons/home/logo_en.svg" mode="aspectFit"></image>
-        <image class="logo-cn" src="/static/icons/home/logo_cn.svg" mode="aspectFit"></image>
+        <image class="logo" :src="logoUrl" mode="aspectFit"></image>
      </view>
    </view>

@@ -45,6 +44,11 @@
 </template>

 <script>
+import { buildUrl } from '@/api/request.js'
+
+// 远程静态资源前缀（服务器 miniprogram 文件夹）
+const ASSET_BASE = '/assets/miniprogram/'
+
 export default {
  name: 'HeroBanner',
  props: {
@@ -55,7 +59,11 @@ export default {
  },
  data() {
    return {
-      statusBarHeight: 20
+      statusBarHeight: 20,
+      // 单张完整 logo（含中英文与分割线），UI-001
+      logoUrl: buildUrl(ASSET_BASE + 'logo.png'),
+      // 全球地图主视觉高清原图（保留切图原始文件名），UI-003
+      heroImg: buildUrl(ASSET_BASE + '首页主视觉全球图.png')
    }
  },
  created() {
@@ -122,19 +130,11 @@ export default {
  padding: 0 20rpx;
  box-sizing: border-box;
 }
-/* 英文 logo 73x30 */
-.logo-en {
-  width: 146rpx;
+/* 单张完整 logo，UI-001 */
+.logo {
+  width: 320rpx;
  height: 60rpx;
 }
-/* 中文 logo 72x12 - 左侧带分隔线 */
-.logo-cn {
-  width: 144rpx;
-  height: 24rpx;
-  margin-left: 12rpx;
-  padding-left: 12rpx;
-  border-left: 1rpx solid #ff6800;
-}

 /* 内容层 */
 .hero-content {
@@ -208,10 +208,10 @@ export default {
  color: #ff6800;
  line-height: 1.2;
 }
-/* 标签 - 8px Regular #000000 */
+/* 标签 - 10px Regular #000000（UI-002 由 8px 调整为 10号 → 19rpx） */
 .stat-label {
  margin-top: 18rpx;
-  font-size: 16rpx;
+  font-size: 19rpx;
  color: #000000;
  line-height: 1.2;
  white-space: nowrap;
@@ -1,8 +1,8 @@
 <template>
  <!-- 为什么选择 Inkreach - Figma 1458:1492 -->
  <view class="why-section">
-    <!-- 区块标题 - 20px Heavy #1A1A1A 居中 -->
-    <text class="section-title">为什么选择Inkrecah？</text>
+    <!-- 区块标题 - 20px Heavy #1A1A1A 居中（UI-006 标题拼写修正） -->
+    <text class="section-title">为什么选择Inkreach？</text>

    <!-- 2x2 网格 - 180x80 卡片 -->
    <view class="why-grid">
@@ -27,10 +27,10 @@ export default {
 </script>

 <style scoped>
-/* 区块 - 灰色背景 #F8F8F8 */
+/* 区块 - 灰色背景 #F8F8F8（UI-006 上下留白对称） */
 .why-section {
  width: 100%;
-  padding: 96rpx 0 80rpx 0;
+  padding: 96rpx 0;
  background: #f8f8f8;
  box-sizing: border-box;
 }
@@ -43,11 +43,12 @@ export default {
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.45;
-  margin-bottom: 64rpx;
+  margin-bottom: 40rpx; /* UI-006 与区块上下留白节奏统一 */
 }

 /* 2x2 网格 - 固定2列(345rpx×2 + 间距20rpx + 容器内边距40rpx = 750rpx)
-   注意：不要用 flex-basis + calc(50%)，部分手机浏览器解析失败会导致单列 */
+   注意：不要用 flex-basis + calc(50%)，部分手机浏览器解析失败会导致单列
+   UI-006: 上下间距与左右间距一致（去掉卡片 margin-bottom，统一用 gap 20rpx） */
 .why-grid {
  padding: 0 20rpx;
  display: flex;
@@ -60,7 +61,6 @@ export default {
  height: 160rpx;
  background: #ffffff;
  border-radius: 12rpx;
-  margin-bottom: 20rpx;
  padding: 0 40rpx;
  box-sizing: border-box;
  display: flex;
@@ -43,6 +43,7 @@ import WhyChoose from './components/WhyChoose.vue'
 import CompanyIntro from './components/CompanyIntro.vue'

 import { getCountries, getGoods } from '@/api/public.js'
+import { buildUrl } from '@/api/request.js'
 import { truncateProductTitle } from '@/utils/product.js'

 import {
@@ -81,6 +82,7 @@ export default {
    }
  },
  async onLoad() {
+    this.loadGlobalFont()
    await this.loadPodCountries()
    await this.loadPodProducts('')
  },
@@ -96,6 +98,19 @@ export default {
    this.stopAutoPlay()
  },
  methods: {
+    // 全局加载苹方子集字体（常用3500字+数字英文，约700KB）
+    // 必须在页面加载后调用（App onLaunch 里页面未创建会报 not font page）
+    // family 用自定义名 PingFangSC（避免与系统苹方重名），已加到 app.css 字体栈首位；global: true 全局生效
+    // 加载失败自动回退系统字体，不影响使用
+    loadGlobalFont() {
+      uni.loadFontFace({
+        global: true,
+        family: 'PingFangSC',
+        source: `url("${buildUrl('/assets/miniprogram/fonts/PingFang-Regular.subset.ttf')}")`,
+        success: () => console.log('字体加载成功'),
+        fail: err => console.warn('字体加载失败，回退系统字体', err)
+      })
+    },
    async loadPodCountries() {
      try {
        const res = await getCountries()
@@ -1,5 +1,9 @@
 // 首页 mock 数据
-// 设计稿尺寸: 390px 宽度，1px ≈ 2rpx
+// 设计稿尺寸: 390px 宽度，1px ≈ 1.923rpx
+import { buildUrl } from '@/api/request.js'
+
+// 远程静态资源前缀（服务器 miniprogram 文件夹）
+const ASSET_BASE = '/assets/miniprogram/'

 // Hero 区 4个指标
 export const trustStats = [
@@ -10,31 +14,31 @@ export const trustStats = [
 ]

 // 4步流程
-// 每一步对应一张预览大图（img 字段）：设计师切图已替换，文件见 static/images/home/step_*.jpg
+// 每一步对应一张预览大图（img 字段）：设计师切图原图，远程路径（保留切图原始文件名），UI-004
 export const stepList = [
  {
    step: '01',
    title: '选择产品',
    desc: '海量精选产品，满足多元定制需求',
-    img: '/static/images/home/step_01_select.jpg'
+    img: buildUrl(ASSET_BASE + '4步开始/01步骤-选择产品.png')
  },
  {
    step: '02',
    title: '上传设计',
    desc: '可视化编辑器，轻松实现创意落地',
-    img: '/static/images/home/step_02_upload.jpg'
+    img: buildUrl(ASSET_BASE + '4步开始/02步骤-上传设计.png')
  },
  {
    step: '03',
    title: '在线销售',
    desc: '一键开通店铺，多渠道触达目标客群',
-    img: '/static/images/home/step_03_sell.jpg'
+    img: buildUrl(ASSET_BASE + '4步开始/03步骤-在线销售.png')
  },
  {
    step: '04',
    title: '生产配送',
    desc: '智能化柔性生产，快速响应全球配送',
-    img: '/static/images/home/step_04_produce.jpg'
+    img: buildUrl(ASSET_BASE + '4步开始/04步骤-生产配送.png')
  }
 ]

@@ -75,31 +79,31 @@ export const podProducts = [
 ]

 // 平台功能卡片
-// 每一张卡片对应一张「集成平台」大图（img 字段）：设计师切图已替换，文件见 static/images/home/feat_*.jpg
+// 每一张卡片对应一张「集成平台」大图（img 字段）：设计师切图原图，远程路径（保留切图原始文件名），UI-005
 export const featureList = [
  {
    step: '01',
    title: '设计工具',
    desc: '轻松设计，快速定制',
-    img: '/static/images/home/feat_design.jpg'
+    img: buildUrl(ASSET_BASE + '用强大功能/设计工具.png')
  },
  {
    step: '02',
    title: '自动化履约',
    desc: '从生产到配送，全程无忧，准时交付',
-    img: '/static/images/home/feat_auto.jpg'
+    img: buildUrl(ASSET_BASE + '用强大功能/自动化履约.png')
  },
  {
    step: '03',
    title: '全球配送',
    desc: '全球11国自营本土工厂',
-    img: '/static/images/home/feat_global.jpg'
+    img: buildUrl(ASSET_BASE + '用强大功能/全球配送.png')
  },
  {
    step: '04',
    title: '店铺集成',
    desc: '与全球主流电商平台无缝对接',
-    img: '/static/images/home/feat_store.jpg'
+    img: buildUrl(ASSET_BASE + '用强大功能/店铺集成.png')
  }
 ]