inkreachhub/inkreach-uni
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改UI问题初

Browse Source
This commit is contained in:
RyRh
2026-08-31 17:37:32 +08:00
parent 585b30a615
commit 18ee29e422
16 changed files with 386 additions and 1070 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/components/CompanyIntro.vue
+9 -5
View File
@@ -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 {
pages/index/components/HeroBanner.vue
+19 -19
View File
@@ -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;
pages/index/components/WhyChoose.vue
+7 -7
View File
@@ -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;
pages/index/index.vue
+15
View File
@@ -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()
pages/index/mock.js
+15 -11
View File
@@ -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')
}
]
pages/products/components/CountryBar.vue
+4 -4
View File
@@ -67,18 +67,18 @@ export default {
padding: 12rpx 20rpx;
box-sizing: border-box;
}
/* 换行布局 - 行间距 8px(未选中态 y=37-6=31px; 第二行 y=37) */
/* 换行布局 - UI-0011: 标签上下间距 +2px → row-gap 20rpx */
.country-inner {
display: flex;
flex-wrap: wrap;
row-gap: 16rpx;
row-gap: 20rpx;
column-gap: 20rpx;
}
/* 单个标签 - padding 4px 10px 圆角 60px gap 10px Figma */
/* 单个标签 - padding 4px 10px 圆角 60px Figma；UI-0011: 国旗与名称间距 4px → 8rpx */
.country-item {
display: flex;
align-items: center;
gap: 20rpx; /* 10px gap */
gap: 8rpx;
padding: 8rpx 20rpx; /* 4px 10px */
background: #f7f7f7;
border-radius: 60rpx;
pages/products/components/ProductGrid.vue
+1 -1
View File
@@ -129,7 +129,7 @@ export default {
.right-content {
display: flex;
flex-direction: column;
background: #f2f2f2;
background: #ececec; /* UI-0012: 与页面大背景统一为 #ECECEC */
}
/* 顶部子分类条件 - padding 6px 10px 圆角 60px */
pages/products/products.css
+1 -1
View File
@@ -5,7 +5,7 @@
display: flex;
flex-direction: column;
overflow: hidden; /* 唯一滚动源 = scroll-view，整页绝不兜底滚动 */
background: #f2f2f2;
background: #ececec; /* UI-0012: 大背景灰统一为 #ECECEC */
}
/* 主体内容 - 左右分栏 */