139 lines
2.5 KiB
Vue
139 lines
2.5 KiB
Vue
<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>
|