修改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;