'首页和商品详情页初稿'
This commit is contained in:
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<!-- 公司简介 + 底部 -->
|
||||
<view class="company-section">
|
||||
<!-- 背景图 -->
|
||||
<view class="company-bg">
|
||||
<image
|
||||
class="bg-img"
|
||||
src="/static/images/home/公司简介背景_1461_1606.png"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<view class="company-content">
|
||||
<!-- 公司简介标题 - 居中 -->
|
||||
<text class="section-title">公司简介</text>
|
||||
|
||||
<!-- 大标题 slogan -->
|
||||
<view class="company-slogan">
|
||||
<text class="slogan-main">用科技重新定义POD供应链</text>
|
||||
<text class="slogan-sub">让每一个创意,都能高效抵达全球</text>
|
||||
</view>
|
||||
|
||||
<!-- 公司描述 -->
|
||||
<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个核心能力卡片 -->
|
||||
<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>
|
||||
</view>
|
||||
<text class="ability-title">{{ item.title }}</text>
|
||||
<text class="ability-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部橙色CTA区域 -->
|
||||
<view class="cta-footer">
|
||||
<view class="qr-wrap">
|
||||
<image
|
||||
class="qr-img"
|
||||
src="/static/images/home/image_26_1496_1761.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
<text class="cta-text">联系我们,开启你的全球生意新篇</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CompanyIntro',
|
||||
props: {
|
||||
abilities: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getAbilityIcon(index) {
|
||||
const icons = ['🎨', '🤖', '🏭', '📦']
|
||||
return icons[index] || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.company-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background: #f8f8f8;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景图 */
|
||||
.company-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
.bg-img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.company-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
/* 公司简介标题 - 设计稿 20px/400/#000000 居中 */
|
||||
.section-title {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* slogan - 设计稿 18px/400 */
|
||||
.company-slogan {
|
||||
padding: 0 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
.slogan-main {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.slogan-sub {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #ff6800;
|
||||
line-height: 1.4;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
/* 公司描述 - 设计稿 12px/400/#000000 */
|
||||
.company-desc {
|
||||
display: block;
|
||||
padding: 0 32rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 两栏 - 设计稿 14px/400/#000000 标题 */
|
||||
.company-cols {
|
||||
display: flex;
|
||||
padding: 0 32rpx;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
.col-left,
|
||||
.col-right {
|
||||
flex: 1;
|
||||
}
|
||||
.col-title {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.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;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 底部CTA - 橙色背景 */
|
||||
.cta-footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding: 60rpx 32rpx 80rpx;
|
||||
background: #ff6800;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.qr-wrap {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user