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
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>