299 lines
6.8 KiB
Vue
299 lines
6.8 KiB
Vue
<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="aspectFill"
|
||
></image>
|
||
</view>
|
||
|
||
<view class="company-content">
|
||
<!-- 公司简介标题 - 居中 20px Heavy -->
|
||
<text class="section-title">公司简介</text>
|
||
|
||
<!-- Slogan - 18px Heavy 渐变文字 2行 -->
|
||
<view class="company-slogan">
|
||
<text class="slogan-main">用科技重新定义POD供应链</text>
|
||
<text class="slogan-sub">让每一个创意,都能高效抵达全球</text>
|
||
</view>
|
||
|
||
<!-- 公司描述 - 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>
|
||
</view>
|
||
<view class="col-right">
|
||
<text class="col-title">愿景</text>
|
||
<text class="col-text">我们坚信，每一个创意都值得被完美呈现。 Inkreach将持续深耕智能供应链生态，用科技消除制造壁垒，让全球创业者专注发挥创造力，共同书写个性化电商的新纪元。</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 4个核心能力卡片 - 2x2 180x90 -->
|
||
<view class="ability-grid">
|
||
<view class="ability-card" v-for="(item, index) in abilities" :key="index">
|
||
<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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部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/Rectangle_187_1470_1653.png"
|
||
mode="aspectFit"
|
||
></image>
|
||
</view>
|
||
<!-- 联系我们文字图 -->
|
||
<image
|
||
class="cta-text-img"
|
||
src="/static/images/home/image_28_1498_1767.png"
|
||
mode="widthFix"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'CompanyIntro',
|
||
props: {
|
||
abilities: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.company-section {
|
||
position: relative;
|
||
width: 100%;
|
||
padding: 0;
|
||
background: #f8f8f8;
|
||
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%;
|
||
height: 100%;
|
||
opacity: 0.5;
|
||
filter: blur(30rpx);
|
||
-webkit-filter: blur(30rpx);
|
||
}
|
||
|
||
.company-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding-top: 40rpx;
|
||
}
|
||
|
||
/* 公司简介标题 - 20px Heavy #000000 居中 */
|
||
.section-title {
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 40rpx;
|
||
font-weight: 900;
|
||
color: #000000;
|
||
line-height: 1.4;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
/* Slogan - 18px Heavy 渐变文字 */
|
||
.company-slogan {
|
||
padding: 0 20rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.slogan-main {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
font-weight: 900;
|
||
color: #000000;
|
||
line-height: 1.4;
|
||
}
|
||
.slogan-sub {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
font-weight: 900;
|
||
line-height: 1.4;
|
||
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 Regular #000000 */
|
||
.company-desc {
|
||
display: block;
|
||
padding: 0 20rpx;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
line-height: 1.5;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
/* 两栏 - 14px Bold 标题 + 12px Regular 正文 */
|
||
.company-cols {
|
||
display: flex;
|
||
padding: 0 20rpx;
|
||
gap: 32rpx;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
.col-left,
|
||
.col-right {
|
||
flex: 1;
|
||
}
|
||
.col-title {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #000000;
|
||
line-height: 1.4;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.col-text {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 核心能力卡片 - 自适应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;
|
||
width: 100%;
|
||
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 {
|
||
position: absolute;
|
||
top: 54rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 208rpx;
|
||
height: 208rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.qr-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
/* 联系我们文字图 - 236x78 居中 */
|
||
.cta-text-img {
|
||
position: absolute;
|
||
top: 256rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 472rpx;
|
||
z-index: 3;
|
||
}
|
||
</style>
|