377 lines
10 KiB
Vue
377 lines
10 KiB
Vue
<template>
|
||
<!-- 公司简介 + 底部CTA - Figma 1461:1606 + 1498:1769 -->
|
||
<view class="company-section">
|
||
<view class="company-content">
|
||
<!-- 背景图 - 设计师切图原图（UI-007），作为内容区背景，不设透明度 -->
|
||
<view class="company-bg">
|
||
<image
|
||
class="bg-img"
|
||
:src="bgUrl"
|
||
mode="aspectFill"
|
||
></image>
|
||
</view>
|
||
|
||
<!-- 公司简介标题 - 居中 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">
|
||
<!-- 图片底层 - image_26原图 -->
|
||
<image class="cta-overlay-img" src="/static/images/home/image_26_1496_1761.jpg" mode="widthFix"></image>
|
||
<!-- 橙色叠加层 - 在图片上方, 高不透明度让橙色更亮更突出 -->
|
||
<view class="cta-orange-bg"></view>
|
||
<!-- 内容层 -->
|
||
<view class="cta-content">
|
||
<!-- 长按识别 196×20px → 377×38rpx, 14px Medium white -->
|
||
<text class="cta-tip">长按识别二维码，添加经理微信</text>
|
||
<!-- 装饰箭头图标 19×10px → 37×19rpx -->
|
||
<image class="cta-arrow" src="/static/icons/home/icon_arrow_down.png" mode="aspectFit"></image>
|
||
<!-- 二维码 104×104px → 200×200rpx, 圆角10px → 19rpx -->
|
||
<!-- show-menu-by-longpress：长按识别二维码（仅微信小程序 2.7.0+ 生效，H5/App 自动忽略不报错） -->
|
||
<view class="qr-wrap">
|
||
<image
|
||
class="qr-img"
|
||
src="/static/images/home/Rectangle_187_1470_1653.jpg"
|
||
mode="aspectFit"
|
||
:show-menu-by-longpress="true"
|
||
></image>
|
||
</view>
|
||
<!-- 电话栏 200×45px → 385×87rpx, #000 0.1透明, 圆角10px → 19rpx -->
|
||
<view class="phone-pill">
|
||
<image class="phone-icon" src="/static/icons/home/icon_phone.svg" mode="aspectFit"></image>
|
||
<text class="phone-text">{{ phone }}</text>
|
||
<image class="phone-icon copy-btn" src="/static/icons/home/icon_wechat.svg" mode="aspectFit" @tap="copyPhone"></image>
|
||
</view>
|
||
<!-- 联系我们 - 用户提供的image.png -->
|
||
<image
|
||
class="cta-text-img"
|
||
src="/static/images/home/contact_us.png"
|
||
mode="widthFix"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { buildUrl } from '@/api/request.js'
|
||
|
||
export default {
|
||
name: 'CompanyIntro',
|
||
props: {
|
||
abilities: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
phone: '15999928161',
|
||
// 公司简介背景图 - 远程切图原图（保留切图原始文件名），UI-007
|
||
bgUrl: buildUrl('/assets/miniprogram/公司简介背景.png')
|
||
}
|
||
},
|
||
methods: {
|
||
// 复制电话号码到剪贴板（uni.setClipboardData 全端支持，无需条件编译）
|
||
copyPhone() {
|
||
uni.setClipboardData({
|
||
data: this.phone,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '电话已复制',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.company-section {
|
||
position: relative;
|
||
width: 100%;
|
||
padding: 0;
|
||
background: #f8f8f8;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 背景图 - company-content 的背景层（z-index:-1 垫在文字下，高度跟随内容区） */
|
||
.company-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -1;
|
||
overflow: hidden;
|
||
}
|
||
.bg-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
/* 背景图不设透明度，按原图直接展示（用户确认） */
|
||
}
|
||
|
||
.company-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding-top: 40rpx;
|
||
padding-bottom: 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列(345rpx×2 + 间距20rpx + 容器内边距40rpx = 750rpx)
|
||
注意：不要用 flex-basis + calc(50%)，部分手机浏览器解析失败会导致单列 */
|
||
.ability-grid {
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
}
|
||
.ability-card {
|
||
width: 345rpx;
|
||
min-width: 0;
|
||
height: 180rpx;
|
||
background: #ffffff;
|
||
border-radius: 12rpx;
|
||
/* 上下间距与 WhyChoose 四方块一致：只用 grid 的 gap 20rpx，不叠加 margin */
|
||
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: 750rpx;
|
||
overflow: hidden;
|
||
}
|
||
/* 图片底层 - image_26原图 */
|
||
.cta-overlay-img {
|
||
position: relative;
|
||
width: 100%;
|
||
z-index: 0;
|
||
display: block;
|
||
}
|
||
/* 橙色叠加层 - 在图片上方, 0.8高不透明度让亮橙色突出 */
|
||
.cta-orange-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #ff6800;
|
||
opacity: 0.85;
|
||
z-index: 1;
|
||
}
|
||
/* 内容层 - absolute覆盖图片和橙色层, flex column 居中 */
|
||
.cta-content {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: 33rpx; /* 17px → 33rpx */
|
||
box-sizing: border-box;
|
||
}
|
||
/* 长按识别 14px Medium white → 27rpx */
|
||
.cta-tip {
|
||
font-size: 27rpx;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
line-height: 38rpx;
|
||
}
|
||
/* 装饰箭头图标 19×10px → 37×19rpx */
|
||
.cta-arrow {
|
||
width: 37rpx;
|
||
height: 19rpx;
|
||
margin-top: 8rpx; /* 4px → 8rpx */
|
||
}
|
||
/* 二维码 104×104px → 200×200rpx, 圆角10px → 19rpx */
|
||
/* 二维码 - 白底圆角容器, 内边距让二维码无圆角 */
|
||
.qr-wrap {
|
||
margin-top: 13rpx; /* 7px → 13rpx */
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
background: #ffffff;
|
||
border-radius: 19rpx; /* 圆角10px → 19rpx */
|
||
padding: 10rpx; /* 内边距5px → 10rpx, 让二维码本身不接触圆角 */
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
/* 二维码图片 - 填满padding后的剩余空间, 无圆角 */
|
||
.qr-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 0;
|
||
}
|
||
/* 电话栏 200×45px → 385×87rpx, #000 0.1透明, 圆角10px → 19rpx */
|
||
.phone-pill {
|
||
margin-top: 23rpx; /* 12px → 23rpx */
|
||
width: 385rpx;
|
||
height: 87rpx;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
border-radius: 19rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.phone-icon {
|
||
width: 35rpx; /* 18px → 35rpx */
|
||
height: 35rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.phone-text {
|
||
font-size: 31rpx; /* UI-008: 16号 → 31rpx */
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
line-height: 38rpx;
|
||
}
|
||
/* 联系我们 - 用户提供的image.png */
|
||
.cta-text-img {
|
||
margin-top: 19rpx; /* 10px → 19rpx */
|
||
width: 569rpx;
|
||
}
|
||
</style>
|