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

'首页样式'

Browse Source
This commit is contained in:
RyRh
2026-08-22 10:08:07 +08:00
parent d53bde57b6
commit d822f594a9
20 changed files with 695 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.css
+8
View File
@@ -228,3 +228,11 @@ page {
.safe-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
/* 全局隐藏横向滚动条(scroll-view / webkit) */
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
background: transparent;
}
pages.json
+6 -2
View File
@@ -31,11 +31,15 @@
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
"text": "首页",
"iconPath": "static/icons/tabbar/tab_home_gray.svg",
"selectedIconPath": "static/icons/tabbar/tab_home_orange.svg"
},
{
"pagePath": "pages/products/products",
"text": "产品"
"text": "产品",
"iconPath": "static/icons/tabbar/tab_product_gray.svg",
"selectedIconPath": "static/icons/tabbar/tab_product_orange.svg"
}
]
},
pages/index/components/CompanyIntro.vue
+155 -115
View File
@@ -1,68 +1,76 @@
<template>
<!-- 公司简介 + 底部 -->
<!-- 公司简介 + 底部CTA - Figma 1461:1606 + 1498:1769 -->
<view class="company-section">
<!-- 背景图 -->
<!-- 背景图 - 模糊 + 0.5透明 -->
<view class="company-bg">
<image
class="bg-img"
src="/static/images/home/公司简介背景_1461_1606.png"
mode="widthFix"
mode="aspectFill"
></image>
</view>
<view class="company-content">
<!-- 公司简介标题 - 居中 -->
<!-- 公司简介标题 - 居中 20px Heavy -->
<text class="section-title">公司简介</text>
<!-- 大标题 slogan -->
<!-- Slogan - 18px Heavy 渐变文字 2行 -->
<view class="company-slogan">
<text class="slogan-main">用科技重新定义POD供应链</text>
<text class="slogan-sub">让每一个创意,都能高效抵达全球</text>
</view>
<!-- 公司描述 -->
<text class="company-desc">
INKREACH印美达全球，一家以AI与智能印花技术驱动的全球化POD柔性供应链公司，致力于成为全球创业者最可靠的成长伙伴。
</text>
<!-- 公司描述 - 12px Regular #000000 -->
<text class="company-desc">Inkreach印美达全球，一家以AI与智能印花技术驱动的全球化POD柔性供应链公司，致力于成为全球创业者最可靠的成长伙伴。</text>
<!-- 两栏说明 -->
<view class="company-cols">
<view class="col-left">
<text class="col-title">服务对象与场景</text>
<text class="col-text">
服务于数千家跨境独立站、TikTok、TEMU、SHEIN等平台商家，提供从海外生产到末端物流的一站式供应链服务，让电商创业者专注增长，无惧后端履约。
</text>
<text class="col-text">服务于数千家跨境独立站、TikTok、TEMU、SHEIN等平台商家，提供从海外生产到末端物流的一站式供应链服务，让电商创业者专注增长，无惧后端履约。</text>
</view>
<view class="col-right">
<text class="col-title">愿景</text>
<text class="col-text">
我们坚信，每一个创意都值得被完美呈现。Inkreach将持续深耕智能供应链生态，用科技消除制造壁垒，让全球创业者专注发挥创造力，共同书写个性化电商的新纪元。
</text>
<text class="col-text">我们坚信，每一个创意都值得被完美呈现。 Inkreach将持续深耕智能供应链生态，用科技消除制造壁垒，让全球创业者专注发挥创造力，共同书写个性化电商的新纪元。</text>
</view>
</view>
<!-- 4个核心能力卡片 -->
<!-- 4个核心能力卡片 - 2x2 180x90 -->
<view class="ability-grid">
<view class="ability-card" v-for="(item, index) in abilities" :key="index">
<view class="ability-icon">
<text class="icon-emoji">{{ getAbilityIcon(index) }}</text>
<image class="ability-icon" :src="item.icon" mode="aspectFit"></image>
<view class="ability-text">
<text class="ability-title">{{ item.title }}</text>
<text class="ability-desc">{{ item.desc }}</text>
</view>
<text class="ability-title">{{ item.title }}</text>
<text class="ability-desc">{{ item.desc }}</text>
</view>
</view>
</view>
<!-- 底部橙色CTA区域 -->
<!-- 底部CTA区域 - 橙色背景+图片叠加+二维码+文字 -->
<view class="cta-footer">
<!-- 橙色背景层 -->
<view class="cta-orange-bg"></view>
<!-- 图片叠加层 -->
<image
class="cta-overlay-img"
src="/static/images/home/image_26_1496_1761.png"
mode="widthFix"
></image>
<!-- 二维码 -->
<view class="qr-wrap">
<image
class="qr-img"
src="/static/images/home/image_26_1496_1761.png"
src="/static/images/home/Rectangle_187_1470_1653.png"
mode="aspectFit"
></image>
</view>
<text class="cta-text">联系我们,开启你的全球生意新篇</text>
<!-- 联系我们文字图 -->
<image
class="cta-text-img"
src="/static/images/home/image_28_1498_1767.png"
mode="widthFix"
></image>
</view>
</view>
</template>
@@ -75,12 +83,6 @@ export default {
type: Array,
default: () => []
}
},
methods: {
getAbilityIcon(index) {
const icons = ['🎨', '🤖', '🏭', '📦']
return icons[index] || ''
}
}
}
</script>
@@ -94,17 +96,22 @@ export default {
overflow: hidden;
}
/* 背景图 */
/* 背景图 - 模糊 + 0.5透明 */
.company-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1088rpx;
z-index: 0;
overflow: hidden;
}
.bg-img {
width: 100%;
display: block;
height: 100%;
opacity: 0.5;
filter: blur(30rpx);
-webkit-filter: blur(30rpx);
}
.company-content {
@@ -113,53 +120,57 @@ export default {
padding-top: 40rpx;
}
/* 公司简介标题 - 设计稿 20px/400/#000000 居中 */
/* 公司简介标题 - 20px Heavy #000000 居中 */
.section-title {
display: block;
text-align: center;
font-size: 38rpx;
font-weight: 700;
color: #1a1a1a;
font-size: 40rpx;
font-weight: 900;
color: #000000;
line-height: 1.4;
margin-bottom: 40rpx;
}
/* slogan - 设计稿 18px/400 */
/* Slogan - 18px Heavy 渐变文字 */
.company-slogan {
padding: 0 32rpx;
margin-bottom: 24rpx;
padding: 0 20rpx;
margin-bottom: 30rpx;
}
.slogan-main {
display: block;
font-size: 34rpx;
font-weight: 700;
color: #1a1a1a;
font-size: 36rpx;
font-weight: 900;
color: #000000;
line-height: 1.4;
}
.slogan-sub {
display: block;
font-size: 34rpx;
font-weight: 700;
color: #ff6800;
font-size: 36rpx;
font-weight: 900;
line-height: 1.4;
margin-top: 6rpx;
margin-top: 4rpx;
background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(255, 104, 0, 1) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 公司描述 - 设计稿 12px/400/#000000 */
/* 公司描述 - 12px Regular #000000 */
.company-desc {
display: block;
padding: 0 32rpx;
padding: 0 20rpx;
font-size: 24rpx;
color: #666666;
line-height: 1.7;
color: #000000;
line-height: 1.5;
margin-bottom: 40rpx;
}
/* 两栏 - 设计稿 14px/400/#000000 标题 */
/* 两栏 - 14px Bold 标题 + 12px Regular 正文 */
.company-cols {
display: flex;
padding: 0 32rpx;
gap: 24rpx;
margin-bottom: 50rpx;
padding: 0 20rpx;
gap: 32rpx;
margin-bottom: 60rpx;
}
.col-left,
.col-right {
@@ -167,92 +178,121 @@ export default {
}
.col-title {
display: block;
font-size: 26rpx;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12rpx;
font-size: 28rpx;
font-weight: 700;
color: #000000;
line-height: 1.4;
margin-bottom: 16rpx;
}
.col-text {
display: block;
font-size: 22rpx;
color: #666666;
line-height: 1.7;
}
/* 核心能力卡片 - 2列网格 */
.ability-grid {
padding: 0 32rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 70rpx;
}
.ability-card {
width: 330rpx;
padding: 32rpx 24rpx;
background: #ffffff;
border-radius: 12rpx;
border: 2rpx solid #f0f0f0;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.ability-icon {
width: 56rpx;
height: 56rpx;
margin-bottom: 16rpx;
display: flex;
align-items: center;
justify-content: center;
}
.icon-emoji {
font-size: 40rpx;
}
.ability-title {
font-size: 26rpx;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8rpx;
}
.ability-desc {
font-size: 22rpx;
color: #999999;
font-size: 24rpx;
color: #000000;
line-height: 1.5;
}
/* 底部CTA - 橙色背景 */
/* 核心能力卡片 - 自适应2列(避免宽度+间距同时固定导致挤压) */
.ability-grid {
padding: 0 20rpx;
display: flex;
flex-wrap: wrap;
gap: 20rpx;
margin-bottom: 60rpx;
}
.ability-card {
flex: 1 1 calc(50% - 10rpx);
min-width: 0;
height: 180rpx;
background: #ffffff;
border-radius: 12rpx;
margin-bottom: 20rpx;
padding: 32rpx 20rpx;
box-sizing: border-box;
display: flex;
align-items: flex-start;
gap: 22rpx;
}
/* 图标 24x24 */
.ability-icon {
width: 48rpx;
height: 48rpx;
flex-shrink: 0;
}
.ability-text {
flex: 1;
display: flex;
flex-direction: column;
}
/* 标题 12px Bold #000000 */
.ability-title {
font-size: 24rpx;
font-weight: 700;
color: #000000;
line-height: 1.4;
}
/* 描述 10px Regular #000000 */
.ability-desc {
margin-top: 8rpx;
font-size: 20rpx;
color: #000000;
line-height: 1.45;
}
/* 底部CTA - 橙色背景+图片叠加+二维码+文字 */
.cta-footer {
position: relative;
z-index: 1;
width: 100%;
padding: 60rpx 32rpx 80rpx;
background: #ff6800;
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
box-sizing: border-box;
}
/* 橙色背景层 - 391x200 */
.cta-orange-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 400rpx;
background: #ff6800;
z-index: 0;
}
/* 图片叠加层 - 390x219 */
.cta-overlay-img {
position: relative;
width: 100%;
z-index: 1;
display: block;
}
/* 二维码 - 104x104 居中 圆角10px 白底 */
.qr-wrap {
width: 260rpx;
height: 260rpx;
position: absolute;
top: 54rpx;
left: 50%;
transform: translateX(-50%);
width: 208rpx;
height: 208rpx;
background: #ffffff;
border-radius: 16rpx;
border-radius: 20rpx;
padding: 20rpx;
margin-bottom: 30rpx;
box-sizing: border-box;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.qr-img {
width: 100%;
height: 100%;
}
.cta-text {
font-size: 28rpx;
color: #ffffff;
font-weight: 500;
text-align: center;
/* 联系我们文字图 - 236x78 居中 */
.cta-text-img {
position: absolute;
top: 256rpx;
left: 50%;
transform: translateX(-50%);
width: 472rpx;
z-index: 3;
}
</style>
pages/index/components/HeroBanner.vue
+186 -96
View File
@@ -1,38 +1,46 @@
<template>
<!-- Hero 首屏 - 设计稿风格 -->
<!-- Hero 首屏 - Figma 1423:452 -->
<view class="hero">
<!-- 顶部 Logo -->
<view class="hero-logo">
<text class="logo-en">inkreach</text>
<text class="logo-cn">印美达全球</text>
</view>
<!-- 渐变背景层 -->
<view class="hero-gradient-bg"></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>
<!-- 地球背景图 -->
<!-- 地球背景图 (y:228, 390x390) -->
<view class="hero-earth">
<image
class="earth-img"
src="/static/images/home/Rectangle_178_1426_1248.png"
mode="widthFix"
mode="aspectFill"
></image>
</view>
<!-- 顶部 Logo 栏 (状态栏 + 双 logo) -->
<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>
</view>
</view>
<!-- 内容层 -->
<view class="hero-content">
<!-- 大标题 - 渐变文字 -->
<text class="hero-title">全球POD供应链平台</text>
<!-- 副标题 -->
<text class="hero-subtitle">连接设计、生产、订单与全球物流，助力跨境卖家快速上新、稳定履约</text>
<!-- 4个指标 + 分隔线 -->
<view class="hero-stats">
<view class="stat-item" v-for="(item, index) in stats" :key="index">
<view class="stat-value-wrap">
<text class="stat-value">{{ item.value }}</text>
<text class="stat-unit">{{ item.unit }}</text>
</view>
<text class="stat-label">{{ item.label }}</text>
<view class="stat-divider" v-if="index < stats.length - 1"></view>
</view>
</view>
</view>
</view>
</template>
@@ -44,6 +52,19 @@ export default {
type: Array,
default: () => []
}
},
data() {
return {
statusBarHeight: 20
}
},
created() {
try {
const sysInfo = uni.getSystemInfoSync()
this.statusBarHeight = sysInfo.statusBarHeight || 20
} catch (e) {
this.statusBarHeight = 20
}
}
}
</script>
@@ -52,87 +73,156 @@ export default {
.hero {
position: relative;
width: 100%;
padding-top: 30rpx;
padding-bottom: 0;
height: 1196rpx;
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 {
/* 渐变背景 - linear-gradient(180deg, rgba(255,228,210,1) 0%, rgba(255,255,255,1) 100%) */
.hero-gradient-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1196rpx;
background: linear-gradient(180deg, rgba(255, 228, 210, 1) 0%, rgba(255, 255, 255, 1) 100%);
z-index: 0;
}
/* 地球图 - y:228 全宽 390x390 */
.hero-earth {
position: absolute;
top: 456rpx;
left: 0;
width: 100%;
height: 780rpx;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.earth-img {
width: 100%;
height: 100%;
}
/* 顶部 Logo 栏 */
.hero-top-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 3;
box-sizing: border-box;
}
.logo-wrap {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
/* 英文 logo 73x30 */
.logo-en {
width: 146rpx;
height: 60rpx;
}
/* 中文 logo 72x12 - 左侧带分隔线 */
.logo-cn {
width: 144rpx;
height: 24rpx;
margin-left: 12rpx;
padding-left: 12rpx;
border-left: 1rpx solid #ff6800;
}
/* 内容层 */
.hero-content {
position: relative;
z-index: 2;
padding: 0 20rpx;
}
/* 大标题 - 28px Heavy gradient linear-gradient(90deg, #000000 0%, #7C3300 100%) 自动宽度居中 */
.hero-title {
display: block;
margin: 236rpx auto 0;
width: fit-content;
max-width: 100%;
font-size: 56rpx;
font-weight: 900;
color: #1a1a1a;
line-height: 1.4;
background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(124, 51, 0, 1) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
white-space: nowrap;
}
/* 副标题 - 10px Regular #000000 自动宽度居中 */
.hero-subtitle {
display: block;
margin: 12rpx auto 0;
width: fit-content;
max-width: calc(100% - 80rpx);
font-size: 20rpx;
color: #000000;
line-height: 1.4;
text-align: center;
}
/* 4个指标 - 居中布局带分隔线 */
.hero-stats {
display: flex;
align-items: flex-start;
justify-content: center;
margin-top: 64rpx;
padding: 0 20rpx;
}
.stat-item {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20rpx;
}
.stat-value-wrap {
display: flex;
align-items: baseline;
justify-content: center;
}
/* 数值 - 18px Bold #FF6800 */
.stat-value {
font-size: 36rpx;
font-weight: 700;
color: #ff6800;
line-height: 1.2;
}
/* 单位 - 10px Bold #FF6800 */
.stat-unit {
margin-left: 2rpx;
font-size: 20rpx;
font-weight: 700;
color: #ff6800;
line-height: 1.2;
}
/* 标签 - 8px Regular #000000 */
.stat-label {
margin-top: 18rpx;
font-size: 16rpx;
color: #000000;
line-height: 1.2;
white-space: nowrap;
}
/* 分隔线 - 0.5px #D7D7D7 */
.stat-divider {
position: absolute;
right: 0;
top: 20rpx;
width: 1rpx;
height: 40rpx;
background: #d7d7d7;
}
</style>
pages/index/components/PlatformFeatures.vue
+51 -44
View File
@@ -1,5 +1,5 @@
<template>
<!-- 平台功能 + 集成平台 -->
<!-- 用强大的功能，开启盈利快车道 - Figma 1455:1490 -->
<view class="feature-section">
<text class="section-title">用强大的功能，开启盈利快车道</text>
@@ -13,22 +13,22 @@
:key="index"
@tap="onFeatTap(index)"
>
<text class="feat-num">0{{ index + 1 }}</text>
<text class="feat-title">{{ item.title }}</text>
<text class="feat-desc">{{ item.desc }}</text>
<text class="feat-num">{{ item.step }}</text>
<view class="feat-text">
<text class="feat-title">{{ item.title }}</text>
<text class="feat-desc">{{ item.desc }}</text>
</view>
</view>
</view>
</scroll-view>
<!-- 集成平台大图 -->
<!-- 集成平台大图 - 370x257 8px圆角 -->
<view class="integration-wrap">
<view class="integration-box">
<image
class="integration-img"
src="/static/images/home/Rectangle_64_1484_1735.png"
mode="widthFix"
></image>
</view>
<image
class="integration-img"
src="/static/images/home/Rectangle_64_1484_1735.png"
mode="widthFix"
></image>
</view>
</view>
</template>
@@ -59,38 +59,45 @@ export default {
<style scoped>
.feature-section {
width: 100%;
padding: 70rpx 0 0 0;
padding: 96rpx 0 0 0;
background: #ffffff;
box-sizing: border-box;
}
/* 区块标题 - 20px Heavy #1A1A1A 居中 */
.section-title {
display: block;
padding: 0 32rpx;
font-size: 38rpx;
font-weight: 700;
text-align: center;
font-size: 40rpx;
font-weight: 900;
color: #1a1a1a;
margin-bottom: 30rpx;
line-height: 1.45;
margin-bottom: 64rpx;
}
/* 功能卡片横向滚动 */
.feat-scroll {
width: 100%;
white-space: nowrap;
margin-bottom: 50rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
.feat-list {
display: inline-flex;
gap: 20rpx;
padding: 0 32rpx;
gap: 16rpx;
}
/* 卡片 - 166x80 圆角6px */
.feat-card {
flex-shrink: 0;
width: 320rpx;
padding: 28rpx 24rpx;
background: #f8f8f8;
width: 332rpx;
height: 160rpx;
padding: 20rpx;
background: #f2f2f2;
border-radius: 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16rpx;
}
.feat-card.active {
background: #ff6800;
@@ -99,47 +106,47 @@ export default {
font-size: 32rpx;
font-weight: 900;
color: #ff6800;
line-height: 1;
margin-bottom: 12rpx;
line-height: 52rpx;
}
.feat-card.active .feat-num {
color: #ffffff;
}
.feat-text {
flex: 1;
display: flex;
flex-direction: column;
}
.feat-title {
font-size: 28rpx;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8rpx;
font-size: 32rpx;
font-weight: 500;
color: #000000;
line-height: 44rpx;
}
.feat-card.active .feat-title {
color: #ffffff;
}
.feat-desc {
margin-top: 6rpx;
font-size: 20rpx;
color: #999999;
line-height: 1.5;
color: #000000;
opacity: 0.6;
line-height: 1.45;
white-space: normal;
}
.feat-card.active .feat-desc {
color: rgba(255, 255, 255, 0.85);
color: #ffffff;
opacity: 1;
}
/* 集成平台大图 */
/* 集成平台大图 - 370x257 8px圆角 */
.integration-wrap {
padding: 0 32rpx;
}
.integration-box {
width: 100%;
background: #ff6800;
border-radius: 16rpx;
padding: 30rpx;
margin-top: 20rpx;
padding: 0 18rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.integration-img {
width: 100%;
border-radius: 16rpx;
display: block;
}
</style>
pages/index/components/PodCatalog.vue
+66 -46
View File
@@ -1,6 +1,7 @@
<template>
<!-- 全球POD货盘 -->
<!-- 全球POD货盘 - Figma 1455:1462 -->
<view class="pod-section">
<!-- 区块标题 - 居中 20px Heavy #1A1A1A -->
<text class="section-title">全球POD货盘</text>
<!-- 国家 tab 横向滚动 -->
@@ -12,9 +13,7 @@
v-for="(item, index) in countries"
:key="index"
@tap="onCountryTap(item.id)"
>
{{ item.flag }} {{ item.name }}
</view>
>{{ item.name }}</view>
</view>
</scroll-view>
@@ -33,10 +32,10 @@
</view>
</view>
<!-- 更多产品 -->
<!-- 更多产品 - 按钮带箭头 -->
<view class="more-products" @tap="onMoreTap">
<text class="more-text">更多产品</text>
<text class="more-arrow">→</text>
<image class="more-arrow" src="/static/icons/home/arrow_more.svg" mode="aspectFit"></image>
</view>
</view>
</template>
@@ -75,97 +74,118 @@ export default {
</script>
<style scoped>
/* 区块 - 灰色背景 #F8F8F8 */
.pod-section {
width: 100%;
padding: 70rpx 0 0 0;
background: #ffffff;
padding: 96rpx 0 0 0;
background: #f8f8f8;
box-sizing: border-box;
}
/* 区块标题 - 设计稿 20px/400/#1a1a1a */
/* 区块标题 - 20px Heavy #1A1A1A 居中 */
.section-title {
display: block;
padding: 0 32rpx;
font-size: 38rpx;
font-weight: 700;
text-align: center;
font-size: 40rpx;
font-weight: 900;
color: #1a1a1a;
margin-bottom: 30rpx;
line-height: 1.45;
margin-bottom: 40rpx;
}
/* 国家 tab - 设计稿 13px/400, 选中 #ffffff 未选中 #000000 */
/* 国家 tab - 13px Medium padding 6px 14px 圆角6px */
.country-scroll {
width: 100%;
white-space: nowrap;
margin-bottom: 36rpx;
padding: 0 20rpx;
box-sizing: border-box;
margin-bottom: 40rpx;
}
.country-list {
display: inline-flex;
gap: 16rpx;
padding: 0 32rpx;
gap: 20rpx;
}
.country-tab {
flex-shrink: 0;
padding: 10rpx 24rpx;
background: #f5f5f5;
border-radius: 40rpx;
font-size: 25rpx;
color: #1a1a1a;
padding: 12rpx 28rpx;
background: #ffffff;
border-radius: 12rpx;
font-size: 26rpx;
font-weight: 500;
color: #000000;
line-height: 1.2;
}
.country-tab.active {
background: #ff6800;
color: #ffffff;
font-weight: 500;
}
/* 产品网格 - 2列 space-between 兼容小程序 */
/* 产品网格 - 自适应2列(避免宽度+间距同时固定导致挤压) */
.pod-grid {
padding: 0 32rpx;
padding: 0 20rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20rpx;
}
.pod-card {
width: 330rpx;
background: #f8f8f8;
border-radius: 12rpx;
flex: 1 1 calc(50% - 10rpx);
min-width: 0;
background: #ffffff;
border-radius: 16rpx;
margin-bottom: 20rpx;
overflow: hidden;
}
.pod-img-wrap {
width: 100%;
height: 340rpx;
box-sizing: border-box;
padding: 16rpx;
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
flex-direction: column;
}
/* 内层图片 - 1:1 正方形(用 padding-bottom 撑出比例,兼容小程序) */
.pod-img-wrap {
position: relative;
width: 100%;
padding-bottom: 100%;
background: #f2f2f2;
border-radius: 8rpx;
overflow: hidden;
}
.pod-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 产品名 - 设计稿 16px/400/#000000 */
/* 产品名 - 16px Medium #000000 居中 */
.pod-name {
display: block;
padding: 16rpx 20rpx 20rpx;
font-size: 26rpx;
color: #1a1a1a;
line-height: 1.4;
background: #ffffff;
text-align: center;
margin-top: 26rpx;
font-size: 32rpx;
font-weight: 500;
color: #000000;
line-height: 1.2;
}
/* 更多产品 - 设计稿 12px/400/#ff6800 居中 */
/* 更多产品按钮 - padding 10px 30px 圆角8px */
.more-products {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
padding: 40rpx 0 20rpx;
margin: 24rpx auto 0;
padding: 20rpx 60rpx;
background: transparent;
border-radius: 16rpx;
width: fit-content;
}
.more-text {
font-size: 24rpx;
font-weight: 500;
color: #ff6800;
line-height: 1.2;
}
.more-arrow {
font-size: 24rpx;
color: #ff6800;
width: 24rpx;
height: 24rpx;
}
</style>
pages/index/components/StepsFlow.vue
+53 -47
View File
@@ -1,5 +1,5 @@
<template>
<!-- 4步开始你的按需定制生意 -->
<!-- 4步开始你的按需定制生意 - Figma 1433:1295 -->
<view class="steps-section">
<text class="section-title">4步开始你的按需定制生意</text>
@@ -14,21 +14,21 @@
@tap="onStepTap(index)"
>
<text class="step-num">{{ item.step }}</text>
<text class="step-title">{{ item.title }}</text>
<text class="step-desc">{{ item.desc }}</text>
<view class="step-text">
<text class="step-title">{{ item.title }}</text>
<text class="step-desc">{{ item.desc }}</text>
</view>
</view>
</view>
</scroll-view>
<!-- 预览大图 -->
<!-- 预览大图 - image 25 370x370 6px圆角 -->
<view class="preview-wrap">
<view class="preview-img-box">
<image
class="preview-img"
src="/static/images/home/image_25_1484_1689.png"
mode="widthFix"
></image>
</view>
<image
class="preview-img"
src="/static/images/home/image_25_1484_1689.png"
mode="widthFix"
></image>
</view>
</view>
</template>
@@ -59,91 +59,97 @@ export default {
<style scoped>
.steps-section {
width: 100%;
padding: 60rpx 0 0 0;
padding: 0;
background: #ffffff;
}
/* 区块标题 - 设计稿 20px/400/#1a1a1a */
/* 区块标题 - 20px Heavy #1A1A1A 居中 */
.section-title {
display: block;
padding: 0 32rpx;
font-size: 38rpx;
font-weight: 700;
text-align: center;
font-size: 40rpx;
font-weight: 900;
color: #1a1a1a;
margin-bottom: 32rpx;
line-height: 1.45;
margin-top: 96rpx;
margin-bottom: 64rpx;
}
/* 步骤卡片横向滚动 */
.steps-scroll {
width: 100%;
white-space: nowrap;
padding: 0 20rpx;
box-sizing: border-box;
}
.steps-list {
display: inline-flex;
gap: 20rpx;
padding: 0 32rpx;
gap: 16rpx;
}
/* 卡片 - 166x80 圆角6px */
.step-card {
flex-shrink: 0;
width: 320rpx;
padding: 28rpx 24rpx;
background: #f8f8f8;
width: 332rpx;
height: 160rpx;
padding: 20rpx;
background: #f2f2f2;
border-radius: 12rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16rpx;
}
.step-card.active {
background: #ff6800;
}
/* 步骤编号 - 设计稿 16px/900/#ff6800 (未选中) / #ffffff (选中) */
/* 步骤编号 - 16px Black weight 900 */
.step-num {
font-size: 32rpx;
font-weight: 900;
color: #ff6800;
line-height: 1;
margin-bottom: 12rpx;
line-height: 52rpx;
}
.step-card.active .step-num {
color: #ffffff;
}
/* 步骤标题 - 设计稿 16px/400/#1a1a1a (未选中) / #ffffff (选中) */
.step-text {
flex: 1;
display: flex;
flex-direction: column;
}
/* 步骤标题 - 16px Medium */
.step-title {
font-size: 28rpx;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8rpx;
font-size: 32rpx;
font-weight: 500;
color: #000000;
line-height: 44rpx;
}
.step-card.active .step-title {
color: #ffffff;
}
/* 步骤描述 - 设计稿 10px/400/#ffffff (选中态描述) */
/* 步骤描述 - 10px Regular opacity 0.6 */
.step-desc {
margin-top: 6rpx;
font-size: 20rpx;
color: #999999;
line-height: 1.5;
color: #000000;
opacity: 0.6;
line-height: 1.45;
white-space: normal;
}
.step-card.active .step-desc {
color: rgba(255, 255, 255, 0.85);
color: #ffffff;
opacity: 1;
}
/* 预览大图 */
/* 预览大图 - 370x370 6px圆角 */
.preview-wrap {
margin-top: 50rpx;
padding: 0 32rpx;
}
.preview-img-box {
width: 100%;
background: #ff6800;
border-radius: 12rpx;
padding: 20rpx;
margin-top: 20rpx;
padding: 0 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.preview-img {
width: 100%;
border-radius: 12rpx;
display: block;
}
</style>
pages/index/components/WhyChoose.vue
+31 -46
View File
@@ -1,15 +1,14 @@
<template>
<!-- 为什么选择 Inkreach -->
<!-- 为什么选择 Inkreach - Figma 1458:1492 -->
<view class="why-section">
<text class="section-title">为什么选择Inkreach？</text>
<!-- 区块标题 - 20px Heavy #1A1A1A 居中 -->
<text class="section-title">为什么选择Inkrecah？</text>
<!-- 2x2 网格 - 180x80 卡片 -->
<view class="why-grid">
<view class="why-card" v-for="(item, index) in reasons" :key="index">
<view class="why-icon">
<image class="icon-img" :src="getIcon(index)" mode="aspectFit"></image>
</view>
<image class="why-icon" :src="item.icon" mode="aspectFit"></image>
<text class="why-title">{{ item.title }}</text>
<text class="why-desc">{{ item.desc }}</text>
</view>
</view>
</view>
@@ -23,75 +22,61 @@ export default {
type: Array,
default: () => []
}
},
methods: {
getIcon(index) {
const icons = [
'/static/icons/home/零库存图标.svg',
'/static/icons/home/快速生产图标.svg',
'/static/icons/home/优质产品图标.svg',
'/static/icons/home/全球配送图标.svg'
]
return icons[index] || ''
}
}
}
</script>
<style scoped>
/* 区块 - 灰色背景 #F8F8F8 */
.why-section {
width: 100%;
padding: 70rpx 0 0 0;
padding: 96rpx 0 80rpx 0;
background: #f8f8f8;
box-sizing: border-box;
}
/* 区块标题 - 20px Heavy #1A1A1A 居中 */
.section-title {
display: block;
padding: 0 32rpx;
font-size: 38rpx;
font-weight: 700;
text-align: center;
font-size: 40rpx;
font-weight: 900;
color: #1a1a1a;
margin-bottom: 30rpx;
line-height: 1.45;
margin-bottom: 64rpx;
}
/* 2列网格 - 用 space-between 兼容小程序 */
/* 2x2 网格 - 自适应2列(避免宽度+间距同时固定导致挤压) */
.why-grid {
padding: 0 32rpx;
padding: 0 20rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20rpx;
}
.why-card {
width: 330rpx;
padding: 36rpx 28rpx;
flex: 1 1 calc(50% - 10rpx);
min-width: 0;
height: 160rpx;
background: #ffffff;
border-radius: 12rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
padding: 0 40rpx;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 12rpx;
}
/* 图标 26x26 */
.why-icon {
width: 52rpx;
height: 52rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: center;
}
.icon-img {
width: 100%;
height: 100%;
flex-shrink: 0;
}
/* 标题 - 16px Bold #000000 */
.why-title {
font-size: 28rpx;
font-weight: 500;
color: #1a1a1a;
margin-bottom: 8rpx;
}
.why-desc {
font-size: 22rpx;
color: #999999;
line-height: 1.5;
font-size: 32rpx;
font-weight: 700;
color: #000000;
line-height: 1.2;
}
</style>
pages/index/mock.js
+70 -68
View File
@@ -1,12 +1,12 @@
// 首页 mock 数据
// 设计稿尺寸: 390px 宽度，1px = 750/390 ≈ 1.923rpx
// 设计稿尺寸: 390px 宽度，1px ≈ 2rpx
// Hero 区 4个指标
export const trustStats = [
{ value: '11国', label: '全球生产工厂' },
{ value: '24h', label: '极速发货' },
{ value: '1000w+', label: '订单履约' },
{ value: '800+', label: '产品SKU' }
{ value: '11', unit: '国', label: '全球本土工厂' },
{ value: '24', unit: 'H', label: '极速发货' },
{ value: '1000', unit: 'W+', label: '订单履约' },
{ value: '800', unit: '+', label: '产品生产' }
]
// 4步流程
@@ -14,7 +14,7 @@ export const stepList = [
{
step: '01',
title: '选择产品',
desc: '海量爆款产品，满足多元化场景需求'
desc: '海量精选产品，满足多元定制需求'
},
{
step: '02',
@@ -23,23 +23,26 @@ export const stepList = [
},
{
step: '03',
title: '自动生产',
desc: '智能分发工厂，高效品质管控'
title: '在线销售',
desc: '一键开通店铺，多渠道触达目标客群'
},
{
step: '04',
title: '全球配送',
desc: '多国本地仓，7日极速达'
title: '生产配送',
desc: '智能化柔性生产，快速响应全球配送'
}
]
// 全球POD货盘 - 国家tab
export const countryTabs = [
{ id: 'us', name: '美国', flag: '🇺🇸' },
{ id: 'ca', name: '加拿大', flag: '🇨🇦' },
{ id: 'mx', name: '墨西哥', flag: '🇲🇽' },
{ id: 'br', name: '巴西', flag: '🇧🇷' },
{ id: 'ar', name: '阿根廷', flag: '🇦🇷' }
{ id: 'us', name: '美国' },
{ id: 'ca', name: '加拿大' },
{ id: 'mx', name: '墨西哥' },
{ id: 'br', name: '巴西' },
{ id: 'ar', name: '阿根廷' },
{ id: 'cl', name: '智利' },
{ id: 'co', name: '哥伦比亚' },
{ id: 'pe', name: '秘鲁' }
]
// 全球POD货盘 - 产品列表
@@ -47,124 +50,123 @@ export const podProducts = [
{
id: 1,
name: '女士短款露脐T恤',
price: '19.00',
image: '/static/images/home/Rectangle_181_1455_1450.png'
image: '/static/images/home/Rectangle_63_1446_1437.png'
},
{
id: 2,
name: '女士短款露脐T恤',
price: '19.00',
image: '/static/images/home/Rectangle_181_1455_1456.png'
image: '/static/images/home/Rectangle_181_1455_1450.png'
},
{
id: 3,
name: '女士短款露脐T恤',
price: '19.00',
image: '/static/images/home/Rectangle_63_1446_1437.png'
image: '/static/images/home/Rectangle_63_1455_1461.png'
},
{
id: 4,
name: '女士短款露脐T恤',
price: '19.00',
image: '/static/images/home/Rectangle_63_1455_1461.png'
image: '/static/images/home/Rectangle_181_1455_1456.png'
}
]
// 平台功能卡片
export const featureList = [
{
id: 1,
title: '在线设计工具',
desc: '可视化编辑器，支持图片文字自由创作',
icon: '/static/icons/home/Vector_1460_1460.svg',
bgColor: '#FFF0E5'
step: '01',
title: '设计工具',
desc: '轻松设计，快速定制'
},
{
id: 2,
step: '02',
title: '自动化履约',
desc: '订单自动分配工厂生产发货',
icon: '/static/icons/home/Vector_1461_1461.svg',
bgColor: '#E5F5FF'
desc: '从生产到配送，全程无忧，准时交付'
},
{
id: 3,
step: '03',
title: '全球配送',
desc: '多国本地仓7日达',
icon: '/static/icons/home/Vector_1462_1462.svg',
bgColor: '#F0FFE5'
desc: '全球11国自营本土工厂'
},
{
id: 4,
step: '04',
title: '店铺集成',
desc: '对接主流电商平台',
icon: '/static/icons/home/Vector_1463_1463.svg',
bgColor: '#FFF5E5'
desc: '与全球主流电商平台无缝对接'
}
]
// 集成平台列表
export const platformList = [
{ id: 1, name: 'Amazon', image: '' },
{ id: 2, name: 'Shopify', image: '' },
{ id: 3, name: 'TikTok', image: '' },
{ id: 4, name: 'Temu', image: '' },
{ id: 5, name: 'Shein', image: '' },
{ id: 6, name: 'Etsy', image: '' },
{ id: 7, name: 'eBay', image: '' }
]
// 为什么选择 - 4个优势
export const reasonList = [
{
id: 1,
title: '零库存',
desc: '按需生产，降低库存风险',
icon: ''
icon: '/static/icons/home/零库存图标.svg'
},
{
id: 2,
title: '快速生产',
desc: '48小时极速出货',
icon: ''
icon: '/static/icons/home/快速生产图标.svg'
},
{
id: 3,
title: '优质产品',
desc: '严格品质管控',
icon: ''
icon: '/static/icons/home/优质产品图标.svg'
},
{
id: 4,
title: '全球配送',
desc: '覆盖200+国家',
icon: ''
icon: '/static/icons/home/全球配送图标.svg'
}
]
// 公司简介
export const companyIntro = {
title: '公司简介',
sloganMain: '用科技重新定义POD供应链',
sloganSub: '让每一个创意,都能高效抵达全球',
desc: 'Inkreach印美达全球，一家以AI与智能印花技术驱动的全球化POD柔性供应链公司，致力于成为全球创业者最可靠的成长伙伴。',
cols: [
{
title: '服务对象与场景',
text: '服务于数千家跨境独立站、TikTok、TEMU、SHEIN等平台商家，提供从海外生产到末端物流的一站式供应链服务，让电商创业者专注增长，无惧后端履约。'
},
{
title: '愿景',
text: '我们坚信，每一个创意都值得被完美呈现。 Inkreach将持续深耕智能供应链生态，用科技消除制造壁垒，让全球创业者专注发挥创造力，共同书写个性化电商的新纪元。'
}
]
}
// 公司简介 - 4个核心能力
export const companyFeatures = [
{
id: 1,
title: '前沿印花技术',
desc: '创新数码直喷等工艺，品质与效率兼得',
icon: ''
desc: '搭载最新智能印花工艺，品质与效率兼得',
icon: '/static/icons/home/ability_printing.svg'
},
{
id: 2,
title: 'AI 深度AI应用',
desc: 'AI设计辅助生产，全链路智能提效',
icon: ''
title: '深度AI应用',
desc: '从设计到生产，全链路智能化提效',
icon: '/static/icons/home/ability_ai.svg'
},
{
id: 3,
title: '全球智能工厂',
desc: '11国本土化生产POD工厂，当地产能随时开启',
icon: ''
desc: '11国自营本土化POD工厂，日均产能超20万单',
icon: '/static/icons/home/ability_global.svg'
},
{
id: 4,
title: '一站式柔性交付',
desc: '覆盖生产到物流，从小品牌到大牌全链路业务落地',
icon: ''
desc: '覆盖生产至物流，助力品牌从概念到商业落地',
icon: '/static/icons/home/ability_flexible.svg'
}
]
// 底部CTA
export const ctaSection = {
qrImage: '/static/images/home/Rectangle_187_1470_1653.png',
bgImage: '/static/images/home/image_26_1496_1761.png',
textImage: '/static/images/home/image_28_1498_1767.png',
text: '联系我们,开启你的全球生意新篇'
}
static/icons/home/ability_ai.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.1 3.19995H7.8L2 20.8H4.8L6.3 15.8H12.4L13.9 20.8H16.9L11.1 3.19995ZM7 13.6L7.7 11.2C8.3 9.29995 8.8 7.29995 9.3 5.29995H9.4C10 7.29995 10.5 9.29995 11.1 11.2L11.8 13.6H7ZM22 3.19995H19.2V20.8H22V3.19995Z" fill="#FF6800"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 338 B

static/icons/home/ability_flexible.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.75 20.7501L11.223 21.5684C11.5066 21.726 11.6484 21.8047 11.7986 21.8356C11.9315 21.863 12.0685 21.863 12.2015 21.8356C12.3516 21.8047 12.4934 21.726 12.777 21.5684L14.25 20.7501M5.25 18.2501L3.82297 17.4573C3.52346 17.2909 3.37368 17.2077 3.26463 17.0893C3.16816 16.9847 3.09515 16.8606 3.05048 16.7254C3 16.5726 3 16.4013 3 16.0586V14.5001M3 9.50009V7.94153C3 7.59889 3 7.42757 3.05048 7.27477C3.09515 7.13959 3.16816 7.01551 3.26463 6.91082C3.37368 6.79248 3.52345 6.70928 3.82297 6.54288L5.25 5.75009M9.75 3.25008L11.223 2.43177C11.5066 2.27421 11.6484 2.19543 11.7986 2.16454C11.9315 2.13721 12.0685 2.13721 12.2015 2.16454C12.3516 2.19543 12.4934 2.27421 12.777 2.43177L14.25 3.25008M18.75 5.75008L20.177 6.54288C20.4766 6.70928 20.6263 6.79248 20.7354 6.91082C20.8318 7.01551 20.9049 7.13959 20.9495 7.27477C21 7.42757 21 7.59889 21 7.94153V9.50008M21 14.5001V16.0586C21 16.4013 21 16.5726 20.9495 16.7254C20.9049 16.8606 20.8318 16.9847 20.7354 17.0893C20.6263 17.2077 20.4766 17.2909 20.177 17.4573L18.75 18.2501M9.75 10.7501L12 12.0001M12 12.0001L14.25 10.7501M12 12.0001V14.5001M3 7.00008L5.25 8.25008M18.75 8.25008L21 7.00008M12 19.5001V22.0001" stroke="#FF6800" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

static/icons/home/ability_global.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 2.4578C14.053 2.16035 13.0452 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 10.2847 21.5681 8.67022 20.8071 7.25945M17 5.75H17.005M10.5001 21.8883L10.5002 19.6849C10.5002 19.5656 10.5429 19.4502 10.6205 19.3596L13.1063 16.4594C13.3106 16.2211 13.2473 15.8556 12.9748 15.6999L10.1185 14.0677C10.0409 14.0234 9.97663 13.9591 9.93234 13.8814L8.07046 10.6186C7.97356 10.4488 7.78657 10.3511 7.59183 10.3684L2.06418 10.8607M21 6C21 8.20914 19 10 17 12C15 10 13 8.20914 13 6C13 3.79086 14.7909 2 17 2C19.2091 2 21 3.79086 21 6ZM17.25 5.75C17.25 5.88807 17.1381 6 17 6C16.8619 6 16.75 5.88807 16.75 5.75C16.75 5.61193 16.8619 5.5 17 5.5C17.1381 5.5 17.25 5.61193 17.25 5.75Z" stroke="#FF6800" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 912 B

static/icons/home/ability_printing.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 2V22H23V2H1ZM12.0524 3.5C12.2469 3.63134 12.3919 3.81891 12.4662 4.035C12.5764 4.31994 12.6469 4.6175 12.6757 4.92C12.7149 5.20699 12.6883 5.49867 12.5979 5.77491C12.5075 6.05115 12.3553 6.30537 12.1519 6.52C11.753 6.91856 11.2095 7.15647 10.6329 7.185H7.67333L9.96762 8.57C10.3781 8.82008 10.6952 9.18758 10.8738 9.62C11.066 10.0242 11.094 10.4822 10.9524 10.905C10.7732 11.4672 10.405 11.9575 9.90476 12.3C9.655 12.4886 9.38025 12.645 9.08762 12.765C8.81252 12.8861 8.51318 12.9488 8.21024 12.9488C7.9073 12.9488 7.60796 12.8861 7.33286 12.765C6.8121 12.5325 6.40772 12.1141 6.20667 11.6C6.17524 11.53 6.14905 11.46 6.12286 11.39L5.26905 9L4.58286 11.45C4.45612 11.8863 4.19298 12.2752 3.82857 12.565C3.49145 12.8531 3.05535 13.0132 2.60286 13.015H2.57143V3.5H12.0524ZM2.57143 14.5H2.61857C3.44255 14.4939 4.23663 14.2046 4.85524 13.685C5.0435 13.5319 5.21866 13.3647 5.37905 13.185C5.8881 13.7725 6.58643 14.1827 7.36523 14.3519C8.14403 14.521 8.95956 14.4395 9.68476 14.12C10.0927 13.9597 10.478 13.7514 10.8319 13.5C11.5989 12.9643 12.1647 12.2068 12.4452 11.34C12.693 10.5887 12.6483 9.77736 12.3195 9.055C12.2336 8.83283 12.1267 8.6186 12 8.415C12.5087 8.21816 12.9663 7.91786 13.341 7.535C13.6909 7.16659 13.9546 6.73122 14.1145 6.2579C14.2744 5.78457 14.3267 5.28416 14.2681 4.79C14.2259 4.35831 14.1274 3.93334 13.9748 3.525V3.5H21.4286V12.535C20.5882 12.5887 19.783 12.8774 19.1133 13.365C18.4318 13.8365 17.9518 14.5273 17.7619 15.31C17.7004 15.5459 17.6636 15.7871 17.6519 16.03C17.1243 15.9104 16.5759 15.9001 16.0438 16C15.5261 16.1029 15.0375 16.3105 14.611 16.6089C14.1845 16.9074 13.83 17.2897 13.5714 17.73C13.345 18.1093 13.1691 18.5141 13.0476 18.935C12.8815 19.4411 12.8036 19.9698 12.8171 20.5H2.57143V14.5ZM14.3886 20.5C14.3623 20.1136 14.4084 19.7259 14.5248 19.355C14.6127 19.0553 14.7413 18.7679 14.9071 18.5C15.056 18.2384 15.2622 18.0105 15.5117 17.8319C15.7612 17.6533 16.0481 17.5281 16.3529 17.465C16.9403 17.3631 17.5463 17.4813 18.0448 17.795C18.0996 17.8247 18.1521 17.8581 18.2019 17.895L20.2971 19.31L19.391 17C19.2291 16.5677 19.209 16.0985 19.3333 15.655C19.4369 15.2079 19.7091 14.8128 20.0981 14.545C20.4925 14.264 20.9598 14.0911 21.4495 14.045V20.5H14.3886Z" fill="#FF6800"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

static/icons/home/arrow_more.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 6H10M7 9L10 6L7 3" stroke="#FF6800" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 200 B

static/icons/home/logo_cn.svg
+8
View File
@@ -0,0 +1,8 @@
<svg width="72" height="12" viewBox="0 0 72 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.05848 5.78271V9.09609C8.25115 8.8399 9.34012 8.57005 10.3219 8.28654L10.6365 9.36936C9.14998 9.77585 7.5632 10.1414 5.88309 10.4659L5.40256 9.48209C5.70678 9.31471 5.85543 9.0756 5.85543 8.75793V1.20887C7.45949 0.959511 8.89762 0.631587 10.1663 0.225099L10.9096 1.1713C9.81719 1.51971 8.53117 1.83739 7.05156 2.11749V4.64523H10.5293V5.7793H7.05848V5.78271ZM13.6891 10.0901L13.3606 8.9458L14.4842 8.96971C14.8126 8.96971 14.9751 8.79209 14.9751 8.43342V1.98085H12.4929V11.7707H11.283V0.860453H16.185V8.68278C16.185 9.62214 15.7494 10.0901 14.8748 10.0901H13.6891Z" fill="#FF6800"/>
<path d="M24.9731 6.93727C24.9316 7.18663 24.8798 7.4189 24.821 7.6341H29.5502V8.7545H25.3914C26.2488 9.72461 27.8494 10.3873 30.1932 10.7357L29.564 11.8561C26.8676 11.3335 25.0976 10.3805 24.2575 9.00386C23.9982 9.45134 23.6767 9.84417 23.2999 10.1755C22.4668 10.8997 21.0079 11.4701 18.9268 11.8937L18.4359 10.7357C20.2439 10.4214 21.5368 9.96714 22.3181 9.37961C22.5601 9.18149 22.771 8.97312 22.9473 8.75792H19.027V7.63752H23.5661C23.6422 7.39841 23.7078 7.12172 23.7666 6.81429L24.9731 6.93727ZM19.148 1.48213H21.8583C21.6889 1.09956 21.5092 0.75797 21.3156 0.46079L22.5774 0.262673C22.7295 0.576932 22.8954 0.986834 23.0821 1.48213H25.5159C25.7095 1.0654 25.8547 0.648666 25.9584 0.225099L27.2444 0.385643C27.1338 0.757972 26.9851 1.12347 26.7915 1.48213H29.4154V2.55472H24.8901V3.50091H28.7482V4.52225H24.8901V5.48211H29.8302V6.5786H18.7366V5.48211H23.6767V4.52225H19.8567V3.50091H23.6767V2.55472H19.1515V1.48213H19.148Z" fill="#FF6800"/>
<path d="M41.0382 11.4974C40.6026 11.4974 39.8179 11.4906 38.6943 11.4735C37.8439 11.4667 37.1491 11.395 36.6028 11.2618C36.0636 11.1115 35.6038 10.8211 35.2166 10.3907C35.0403 10.1823 34.8709 10.0799 34.7119 10.0799C34.4422 10.0799 33.979 10.6571 33.3256 11.8117L32.444 11.0021C33.0836 9.97397 33.6575 9.32496 34.1726 9.05852V5.55726H32.4579V4.41295H35.3203V9.14733C35.386 9.19857 35.4517 9.26005 35.5104 9.3352C35.8388 9.66654 36.1569 9.91248 36.468 10.0696C36.8552 10.2438 37.4429 10.3429 38.2346 10.3702C39.2267 10.3873 40.1083 10.3941 40.8826 10.3941L42.6354 10.3805C43.2161 10.3565 43.6725 10.3292 44.0078 10.3053L43.7174 11.5009H41.0382V11.4974ZM33.4604 0.337824C34.3178 0.986838 35.0437 1.62902 35.6418 2.26779L34.7603 3.13883C34.2555 2.51714 33.5503 1.84422 32.6411 1.12006L33.4604 0.337824ZM36.2848 2.88947H38.9709C39.0366 2.2917 39.0746 1.68026 39.085 1.05857V0.225099H40.2811V0.798966C40.2811 1.52996 40.2431 2.2268 40.167 2.89289H43.1919V4.0372H40.3814C40.8031 5.57434 41.8644 7.12173 43.5722 8.68278L42.7391 9.55382C41.2353 8.06792 40.2258 6.60593 39.7142 5.16785C39.1334 7.11831 38.1136 8.5803 36.6512 9.55382L35.9184 8.58371C37.3876 7.6546 38.3486 6.13796 38.7911 4.0372H36.2848V2.88947Z" fill="#FF6800"/>
<path d="M52.599 0.228514C54.1789 1.8408 55.9938 3.10467 58.0438 4.02695L57.4527 5.08587C56.8062 4.77844 56.2185 4.45735 55.6861 4.12601V5.24642H52.7753V7.11489H56.3188V8.25921H52.7753V10.2267H57.4665V11.3847H46.888V10.2267H51.5654V8.25921H48.0115V7.11489H51.5654V5.24642H48.6546V4.12601C48.1153 4.45052 47.5103 4.77844 46.8396 5.10978L46.2588 4.07477C48.454 3.03635 50.2793 1.75541 51.7417 0.225099H52.599V0.228514ZM55.6619 4.11235C54.3517 3.31645 53.1867 2.37709 52.1703 1.29768C51.23 2.31902 50.065 3.25838 48.6787 4.11235H55.6619Z" fill="#FF6800"/>
<path d="M60.6473 4.69988H61.9852V2.05942H60.509V0.94926H64.5814V2.05942H63.1952V4.69988H64.3187V5.82028H63.1952V8.01326C63.6895 7.79806 64.1527 7.58628 64.5814 7.37791V8.52222C63.3784 9.11317 62.0509 9.62555 60.5989 10.0662L60.2947 8.89456C60.9654 8.74426 61.5289 8.60079 61.9852 8.45733V5.81686H60.6473V4.69988ZM64.692 2.25754H67.4646V0.225099H68.6123V2.25412H70.327C69.9813 1.86471 69.5353 1.44456 68.9891 0.997083L69.6702 0.348069C70.327 0.836537 70.8594 1.31134 71.2708 1.76907L70.7902 2.25412H71.4955V3.38819H68.6089V4.49834C68.7782 5.02097 68.9718 5.51285 69.1896 5.96716C69.684 5.3933 70.1438 4.76478 70.5621 4.07477L71.4575 4.73404C70.8767 5.63241 70.2924 6.37365 69.7047 6.9646C70.327 8.02693 71.091 8.95604 72.0002 9.75535L71.2051 10.6879C70.1127 9.62555 69.2484 8.37876 68.6089 6.95093V10.4009C68.6089 11.19 68.1975 11.5828 67.3747 11.5828H66.0541L65.8017 10.4624C66.2719 10.5205 66.6626 10.5513 66.9737 10.5513C67.3021 10.5513 67.4646 10.4044 67.4646 10.114V7.54871C66.6902 8.62129 65.7948 9.54698 64.7785 10.3258L64.1493 9.30446C65.3834 8.49832 66.4897 7.38474 67.4646 5.96716V3.38819H64.692V2.25754ZM65.577 4.17383C66.1475 5.00389 66.5865 5.71439 66.8873 6.30533L66.0541 6.8792C65.7015 6.23019 65.2348 5.5231 64.654 4.7477L65.577 4.17383Z" fill="#FF6800"/>
<line x1="0.253237" y1="1.10693e-08" x2="0.253237" y2="11.1424" stroke="#FF6800" stroke-width="0.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

static/icons/home/logo_en.svg
+14
View File
@@ -0,0 +1,14 @@
<svg width="73" height="30" viewBox="0 0 73 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.9351 20.0809C41.0877 26.1054 33.2907 28.4959 30.5222 25.4211C29.4344 24.2135 29.2848 22.3443 29.916 20.1529C27.9686 23.6941 27.5504 26.8884 29.1447 28.659C31.9151 31.7338 39.7121 29.3414 46.5575 23.3187C50.717 19.66 53.5679 15.5027 54.5445 12.1132C53.1075 14.7255 50.8417 17.5254 47.9351 20.0809Z" fill="#FF6800"/>
<path d="M2.29076 9.25257H0.604346C0.270517 9.25257 0 9.51987 0 9.84972V11.5161C0 11.8459 0.270517 12.1132 0.604346 12.1132H2.29076C2.62459 12.1132 2.8951 11.8459 2.8951 11.5161V9.84972C2.8951 9.51987 2.62459 9.25257 2.29076 9.25257Z" fill="#FF6800"/>
<path d="M2.29076 13.0497H0.604346C0.270517 13.0497 0 13.3189 0 13.6487V22.2685C0 22.5984 0.270517 22.8657 0.604346 22.8657H2.29076C2.62459 22.8657 2.8951 22.5984 2.8951 22.2685V13.6487C2.8951 13.3189 2.62459 13.0497 2.29076 13.0497Z" fill="#FF6800"/>
<path d="M8.71549 13.0573C8.18022 13.0648 7.66796 13.1672 7.19408 13.3454C7.08856 13.1691 6.89478 13.0497 6.67223 13.0497H4.85728C4.52345 13.0497 4.25293 13.317 4.25293 13.6468V17.6013V17.6999V22.2989C4.25293 22.6287 4.52345 22.896 4.85728 22.896H6.67223C7.00606 22.896 7.27658 22.6287 7.27658 22.2989V17.7017V17.5349C7.27658 16.6951 7.98452 16.0146 8.84212 16.0468C9.65751 16.0771 10.2925 16.7653 10.2925 17.5728V22.3235C10.2925 22.6533 10.5631 22.9206 10.8969 22.9206H12.7118C13.0457 22.9206 13.3162 22.6533 13.3162 22.3235V17.5349C13.3181 15.0421 11.248 13.0193 8.71549 13.0573Z" fill="#FF6800"/>
<path d="M67.7277 13.0573C67.2289 13.0648 66.7512 13.1539 66.3041 13.3113V7.84594C66.3041 7.51609 66.0336 7.24879 65.6998 7.24879H63.8848C63.551 7.24879 63.2805 7.51609 63.2805 7.84594V16.9074C63.2805 16.9738 63.2862 17.0382 63.2939 17.1008C63.2747 17.2657 63.2651 17.4326 63.2651 17.6013V22.2988C63.2651 22.6287 63.5357 22.896 63.8695 22.896H65.6844C66.0183 22.896 66.2888 22.6287 66.2888 22.2988V17.5349C66.2888 16.6951 66.9967 16.0146 67.8543 16.0468C68.6697 16.0771 69.3048 16.7653 69.3048 17.5728V22.3235C69.3048 22.6533 69.5753 22.9206 69.9091 22.9206H71.7241C72.0579 22.9206 72.3284 22.6533 72.3284 22.3235V17.5349C72.3284 15.0421 70.2583 13.0193 67.7277 13.0573Z" fill="#FF6800"/>
<path d="M23.1448 13.1312H21.3299C20.996 13.1312 20.7255 13.3985 20.7255 13.7283V14.3255C20.7255 15.1122 20.1058 15.7586 19.325 15.8155C19.2655 15.8136 19.2041 15.8136 19.1446 15.8136C19.1293 15.8136 19.1158 15.8155 19.1005 15.8155C18.7072 15.7871 18.2851 15.6089 17.8861 15.2278C17.769 15.116 17.7019 14.9605 17.7019 14.7994V7.84594C17.7019 7.51609 17.4314 7.24879 17.0975 7.24879H15.2826C14.9487 7.24879 14.6782 7.51609 14.6782 7.84594V13.7283V16.2269V20.3614V22.3842C14.6782 22.714 14.9487 22.9813 15.2826 22.9813H17.0975C17.4314 22.9813 17.7019 22.714 17.7019 22.3842V22.3387V20.2932C17.7019 19.5084 18.3196 18.8619 19.0986 18.8051C19.1715 18.8069 19.2444 18.8069 19.3173 18.8051C20.1135 18.86 20.7255 19.5368 20.7255 20.3311V22.3861C20.7255 22.7159 20.996 22.9832 21.3299 22.9832H23.1448C23.4786 22.9832 23.7492 22.7159 23.7492 22.3861V20.2951C23.7492 19.1501 23.3117 18.1055 22.5942 17.3112C23.3117 16.5188 23.7492 15.4724 23.7492 14.3255V13.7283C23.7492 13.3985 23.4786 13.1312 23.1448 13.1312Z" fill="#FF6800"/>
<path d="M29.701 16.0714C29.7605 16.0733 29.818 16.0468 29.8526 15.9994C30.3495 15.2904 30.8963 14.5833 31.4872 13.8819C31.6157 13.7283 31.5562 13.4971 31.3701 13.4212C30.8176 13.1956 30.2094 13.0743 29.5725 13.0838C29.066 13.0914 28.5825 13.1843 28.1316 13.3435C28.0837 13.1843 27.9378 13.0686 27.7613 13.0686H25.7296C25.3958 13.0686 25.1252 13.3359 25.1252 13.6658V17.2847C25.1176 17.3984 25.1118 17.5122 25.1118 17.6278V22.3254C25.1118 22.4941 25.1828 22.6477 25.2979 22.7557C25.4073 22.8676 25.5608 22.9377 25.7315 22.9377H27.5465C27.8803 22.9377 28.1508 22.6704 28.1508 22.3405V17.3662C28.2487 16.6174 28.9106 16.043 29.701 16.0714Z" fill="#FF6800"/>
<path d="M30.9828 18.8069C31.1152 19.6145 31.4624 20.3861 31.9766 21.0249H31.9747C33.8146 23.3415 37.4541 23.5386 39.8177 21.5481C39.9444 21.442 39.9578 21.2524 39.8504 21.1273L38.4536 19.5046C38.35 19.3832 38.1678 19.3662 38.0392 19.461C37.0032 20.2249 35.9346 20.4031 34.8487 19.8553L38.2752 18.4581L40.7578 17.4439C40.9132 17.3814 40.9861 17.2051 40.9209 17.0534C40.66 16.4354 40.3281 15.5918 39.9731 15.1349C39.0484 13.8478 37.5404 13.0572 35.902 13.0591H35.9039C32.8553 13.0364 30.4571 15.8439 30.9828 18.8069ZM33.7973 17.6562C33.9201 16.0449 35.9864 15.1823 37.22 16.261C36.3413 16.6193 34.6741 17.2998 33.7973 17.6581V17.6562Z" fill="#FF6800"/>
<path d="M57.9139 15.952C58.6065 15.6695 59.3835 15.7473 59.9955 16.1397C60.2315 16.2913 60.5461 16.2534 60.7457 16.0563L61.8469 14.9681C62.1079 14.7103 62.0752 14.2857 61.7798 14.0658C60.9203 13.4231 59.8651 13.0705 58.7734 13.0724C56.5153 13.0724 54.5372 14.5719 53.954 16.7273C53.3688 18.8828 54.3223 21.1576 56.2793 22.2742C58.0309 23.2732 60.197 23.1197 61.7779 21.9425C62.0733 21.7225 62.1079 21.2979 61.8469 21.0382L60.7457 19.9501C60.5442 19.751 60.2296 19.7188 59.9898 19.8704C59.3777 20.2591 58.6046 20.3368 57.9139 20.0543C57.0736 19.7112 56.5268 18.9017 56.5268 18.0032C56.5268 17.1065 57.0736 16.2951 57.9139 15.952Z" fill="#FF6800"/>
<path d="M51.7179 14.479V13.3814C51.7179 13.2165 51.5817 13.0819 51.4147 13.0819H49.147C48.9801 13.0819 48.8439 13.2165 48.8439 13.3814V13.5236C48.1609 13.207 47.3954 13.0383 46.5877 13.0592C43.9535 13.1312 41.8047 15.2563 41.7395 17.861C41.6915 19.715 42.6815 21.3434 44.176 22.223C44.9435 21.6467 45.7013 21.0268 46.4457 20.3671C46.5531 20.2704 46.6606 20.1738 46.768 20.0771C46.7546 20.0771 46.7431 20.079 46.7296 20.079C45.4826 20.079 44.483 19.0079 44.6269 17.7472C44.7343 16.788 45.5171 16.0146 46.4879 15.9084C47.7637 15.7681 48.8477 16.7539 48.8477 17.9861C48.8477 18.0013 48.8477 18.0164 48.8458 18.0335C49.9336 16.8695 50.9006 15.6733 51.7179 14.479Z" fill="#FF6800"/>
<path d="M48.8467 22.3766V22.8467H51.4175C51.5845 22.8467 51.7207 22.7121 51.7207 22.5472V19.2657C50.7307 20.3842 50.0208 21.3358 48.8467 22.3766Z" fill="#FF6800"/>
<path d="M36.5144 9.03833C43.1162 2.69528 51.0705 0.200528 54.2822 3.46494C55.6827 4.88862 55.9494 7.17106 55.2606 9.81937C56.878 6.24785 57.018 3.06874 55.2971 1.319C52.2236 -1.80324 44.3805 0.807156 37.7807 7.14831C35.6165 9.2279 33.8534 11.4516 32.5718 13.6089C33.6615 12.0582 34.9853 10.5094 36.5144 9.03833Z" fill="#FF6800"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

static/icons/tabbar/tab_home_gray.svg
+10
View File
@@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1594_113)">
<path d="M21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9.48907C3 9.18048 3.14247 8.88917 3.38606 8.69972L11.3861 2.47749C11.7472 2.19663 12.2528 2.19663 12.6139 2.47749L20.6139 8.69972C20.8575 8.88917 21 9.18048 21 9.48907V20Z" fill="#999999"/>
</g>
<defs>
<clipPath id="clip0_1594_113">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 509 B

static/icons/tabbar/tab_home_orange.svg
+10
View File
@@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1594_113)">
<path d="M21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9.48907C3 9.18048 3.14247 8.88917 3.38606 8.69972L11.3861 2.47749C11.7472 2.19663 12.2528 2.19663 12.6139 2.47749L20.6139 8.69972C20.8575 8.88917 21 9.18048 21 9.48907V20Z" fill="#FF6800"/>
</g>
<defs>
<clipPath id="clip0_1594_113">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 509 B

static/icons/tabbar/tab_product_gray.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.75" y="1.58591" width="6.57282" height="6.57282" rx="1.25" stroke="#999999" stroke-width="1.5"/>
<rect x="0.75" y="11.6769" width="6.57282" height="6.57282" rx="1.25" stroke="#999999" stroke-width="1.5"/>
<rect x="14.1274" y="0.224751" width="6.57282" height="6.57282" rx="1.25" transform="rotate(45 14.1274 0.224751)" stroke="#999999" stroke-width="1.5"/>
<rect x="10.841" y="11.6769" width="6.57282" height="6.57282" rx="1.25" stroke="#999999" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 581 B

static/icons/tabbar/tab_product_orange.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.75" y="1.58591" width="6.57282" height="6.57282" rx="1.25" stroke="black" stroke-width="1.5"/>
<rect x="0.75" y="11.6769" width="6.57282" height="6.57282" rx="1.25" stroke="black" stroke-width="1.5"/>
<rect x="14.1274" y="0.224751" width="6.57282" height="6.57282" rx="1.25" transform="rotate(45 14.1274 0.224751)" stroke="black" stroke-width="1.5"/>
<rect x="10.841" y="11.6769" width="6.57282" height="6.57282" rx="1.25" stroke="black" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 573 B