'首页和商品详情页初稿'
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>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<!-- Hero 首屏 - 设计稿风格 -->
|
||||
<view class="hero">
|
||||
<!-- 顶部 Logo -->
|
||||
<view class="hero-logo">
|
||||
<text class="logo-en">inkreach</text>
|
||||
<text class="logo-cn">印美达全球</text>
|
||||
</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>
|
||||
|
||||
<!-- 地球背景图 -->
|
||||
<view class="hero-earth">
|
||||
<image
|
||||
class="earth-img"
|
||||
src="/static/images/home/Rectangle_178_1426_1248.png"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeroBanner',
|
||||
props: {
|
||||
stats: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hero {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 30rpx;
|
||||
padding-bottom: 0;
|
||||
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 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.earth-img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<!-- 平台功能 + 集成平台 -->
|
||||
<view class="feature-section">
|
||||
<text class="section-title">用强大的功能，开启盈利快车道</text>
|
||||
|
||||
<!-- 功能卡片横向滚动 -->
|
||||
<scroll-view scroll-x class="feat-scroll" show-scrollbar="false">
|
||||
<view class="feat-list">
|
||||
<view
|
||||
class="feat-card"
|
||||
:class="{ active: activeFeat === index }"
|
||||
v-for="(item, index) in features"
|
||||
: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>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 集成平台大图 -->
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PlatformFeatures',
|
||||
props: {
|
||||
features: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeFeat: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onFeatTap(index) {
|
||||
this.activeFeat = index
|
||||
this.$emit('change', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.feature-section {
|
||||
width: 100%;
|
||||
padding: 70rpx 0 0 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
padding: 0 32rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 功能卡片横向滚动 */
|
||||
.feat-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
.feat-list {
|
||||
display: inline-flex;
|
||||
gap: 20rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
.feat-card {
|
||||
flex-shrink: 0;
|
||||
width: 320rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.feat-card.active {
|
||||
background: #ff6800;
|
||||
}
|
||||
.feat-num {
|
||||
font-size: 32rpx;
|
||||
font-weight: 900;
|
||||
color: #ff6800;
|
||||
line-height: 1;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.feat-card.active .feat-num {
|
||||
color: #ffffff;
|
||||
}
|
||||
.feat-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.feat-card.active .feat-title {
|
||||
color: #ffffff;
|
||||
}
|
||||
.feat-desc {
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
line-height: 1.5;
|
||||
white-space: normal;
|
||||
}
|
||||
.feat-card.active .feat-desc {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* 集成平台大图 */
|
||||
.integration-wrap {
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
.integration-box {
|
||||
width: 100%;
|
||||
background: #ff6800;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.integration-img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<!-- 全球POD货盘 -->
|
||||
<view class="pod-section">
|
||||
<text class="section-title">全球POD货盘</text>
|
||||
|
||||
<!-- 国家 tab 横向滚动 -->
|
||||
<scroll-view scroll-x class="country-scroll" show-scrollbar="false">
|
||||
<view class="country-list">
|
||||
<view
|
||||
class="country-tab"
|
||||
:class="{ active: activeCountry === item.id }"
|
||||
v-for="(item, index) in countries"
|
||||
:key="index"
|
||||
@tap="onCountryTap(item.id)"
|
||||
>
|
||||
{{ item.flag }} {{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 产品网格 2列 -->
|
||||
<view class="pod-grid">
|
||||
<view
|
||||
class="pod-card"
|
||||
v-for="(item, index) in products"
|
||||
:key="index"
|
||||
@tap="onProductTap(item)"
|
||||
>
|
||||
<view class="pod-img-wrap">
|
||||
<image class="pod-img" :src="item.image" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="pod-name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 更多产品 -->
|
||||
<view class="more-products" @tap="onMoreTap">
|
||||
<text class="more-text">更多产品</text>
|
||||
<text class="more-arrow">→</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PodCatalog',
|
||||
props: {
|
||||
countries: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
products: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeCountry: 'us'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCountryTap(id) {
|
||||
this.activeCountry = id
|
||||
this.$emit('countryChange', id)
|
||||
},
|
||||
onProductTap(item) {
|
||||
this.$emit('productTap', item)
|
||||
},
|
||||
onMoreTap() {
|
||||
this.$emit('moreTap')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pod-section {
|
||||
width: 100%;
|
||||
padding: 70rpx 0 0 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* 区块标题 - 设计稿 20px/400/#1a1a1a */
|
||||
.section-title {
|
||||
display: block;
|
||||
padding: 0 32rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 国家 tab - 设计稿 13px/400, 选中 #ffffff 未选中 #000000 */
|
||||
.country-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
.country-list {
|
||||
display: inline-flex;
|
||||
gap: 16rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
.country-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 10rpx 24rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 40rpx;
|
||||
font-size: 25rpx;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.country-tab.active {
|
||||
background: #ff6800;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 产品网格 - 2列 space-between 兼容小程序 */
|
||||
.pod-grid {
|
||||
padding: 0 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pod-card {
|
||||
width: 330rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pod-img-wrap {
|
||||
width: 100%;
|
||||
height: 340rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.pod-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 产品名 - 设计稿 16px/400/#000000 */
|
||||
.pod-name {
|
||||
display: block;
|
||||
padding: 16rpx 20rpx 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.4;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* 更多产品 - 设计稿 12px/400/#ff6800 居中 */
|
||||
.more-products {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
padding: 40rpx 0 20rpx;
|
||||
}
|
||||
.more-text {
|
||||
font-size: 24rpx;
|
||||
color: #ff6800;
|
||||
}
|
||||
.more-arrow {
|
||||
font-size: 24rpx;
|
||||
color: #ff6800;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<!-- 4步开始你的按需定制生意 -->
|
||||
<view class="steps-section">
|
||||
<text class="section-title">4步开始你的按需定制生意</text>
|
||||
|
||||
<!-- 步骤卡片横向滚动 -->
|
||||
<scroll-view scroll-x class="steps-scroll" show-scrollbar="false">
|
||||
<view class="steps-list">
|
||||
<view
|
||||
class="step-card"
|
||||
:class="{ active: activeStep === index }"
|
||||
v-for="(item, index) in steps"
|
||||
:key="index"
|
||||
@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>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 预览大图 -->
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StepsFlow',
|
||||
props: {
|
||||
steps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeStep: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onStepTap(index) {
|
||||
this.activeStep = index
|
||||
this.$emit('change', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.steps-section {
|
||||
width: 100%;
|
||||
padding: 60rpx 0 0 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* 区块标题 - 设计稿 20px/400/#1a1a1a */
|
||||
.section-title {
|
||||
display: block;
|
||||
padding: 0 32rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
/* 步骤卡片横向滚动 */
|
||||
.steps-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.steps-list {
|
||||
display: inline-flex;
|
||||
gap: 20rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
.step-card {
|
||||
flex-shrink: 0;
|
||||
width: 320rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.step-card.active {
|
||||
background: #ff6800;
|
||||
}
|
||||
/* 步骤编号 - 设计稿 16px/900/#ff6800 (未选中) / #ffffff (选中) */
|
||||
.step-num {
|
||||
font-size: 32rpx;
|
||||
font-weight: 900;
|
||||
color: #ff6800;
|
||||
line-height: 1;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.step-card.active .step-num {
|
||||
color: #ffffff;
|
||||
}
|
||||
/* 步骤标题 - 设计稿 16px/400/#1a1a1a (未选中) / #ffffff (选中) */
|
||||
.step-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.step-card.active .step-title {
|
||||
color: #ffffff;
|
||||
}
|
||||
/* 步骤描述 - 设计稿 10px/400/#ffffff (选中态描述) */
|
||||
.step-desc {
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
line-height: 1.5;
|
||||
white-space: normal;
|
||||
}
|
||||
.step-card.active .step-desc {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* 预览大图 */
|
||||
.preview-wrap {
|
||||
margin-top: 50rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
.preview-img-box {
|
||||
width: 100%;
|
||||
background: #ff6800;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.preview-img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<!-- 为什么选择 Inkreach -->
|
||||
<view class="why-section">
|
||||
<text class="section-title">为什么选择Inkreach？</text>
|
||||
|
||||
<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>
|
||||
<text class="why-title">{{ item.title }}</text>
|
||||
<text class="why-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WhyChoose',
|
||||
props: {
|
||||
reasons: {
|
||||
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>
|
||||
.why-section {
|
||||
width: 100%;
|
||||
padding: 70rpx 0 0 0;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
padding: 0 32rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 2列网格 - 用 space-between 兼容小程序 */
|
||||
.why-grid {
|
||||
padding: 0 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.why-card {
|
||||
width: 330rpx;
|
||||
padding: 36rpx 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.why-icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.icon-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.why-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.why-desc {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user