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>