229 lines
5.0 KiB
Vue
229 lines
5.0 KiB
Vue
<template>
|
||
<!-- Hero 首屏 - Figma 1423:452 -->
|
||
<view class="hero">
|
||
<!-- 渐变背景层 -->
|
||
<view class="hero-gradient-bg"></view>
|
||
|
||
<!-- 地球背景图 (y:228, 390x390) -->
|
||
<view class="hero-earth">
|
||
<image
|
||
class="earth-img"
|
||
src="/static/images/home/Rectangle_178_1426_1248.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
</view>
|
||
|
||
<!-- 顶部 Logo 栏 (状态栏 + 双 logo) -->
|
||
<view class="hero-top-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||
<view class="logo-wrap">
|
||
<image class="logo-en" src="/static/icons/home/logo_en.svg" mode="aspectFit"></image>
|
||
<image class="logo-cn" src="/static/icons/home/logo_cn.svg" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容层 -->
|
||
<view class="hero-content">
|
||
<!-- 大标题 - 渐变文字 -->
|
||
<text class="hero-title">全球POD供应链平台</text>
|
||
|
||
<!-- 副标题 -->
|
||
<text class="hero-subtitle">连接设计、生产、订单与全球物流，助力跨境卖家快速上新、稳定履约</text>
|
||
|
||
<!-- 4个指标 + 分隔线 -->
|
||
<view class="hero-stats">
|
||
<view class="stat-item" v-for="(item, index) in stats" :key="index">
|
||
<view class="stat-value-wrap">
|
||
<text class="stat-value">{{ item.value }}</text>
|
||
<text class="stat-unit">{{ item.unit }}</text>
|
||
</view>
|
||
<text class="stat-label">{{ item.label }}</text>
|
||
<view class="stat-divider" v-if="index < stats.length - 1"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'HeroBanner',
|
||
props: {
|
||
stats: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight: 20
|
||
}
|
||
},
|
||
created() {
|
||
try {
|
||
const sysInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = sysInfo.statusBarHeight || 20
|
||
} catch (e) {
|
||
this.statusBarHeight = 20
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.hero {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 1196rpx;
|
||
background: #ffffff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 渐变背景 - linear-gradient(180deg, rgba(255,228,210,1) 0%, rgba(255,255,255,1) 100%) */
|
||
.hero-gradient-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 1196rpx;
|
||
background: linear-gradient(180deg, rgba(255, 228, 210, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
||
z-index: 0;
|
||
}
|
||
|
||
/* 地球图 - y:228 全宽 390x390 */
|
||
.hero-earth {
|
||
position: absolute;
|
||
top: 456rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 780rpx;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.earth-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 顶部 Logo 栏 */
|
||
.hero-top-bar {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 3;
|
||
box-sizing: border-box;
|
||
}
|
||
.logo-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 88rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
/* 英文 logo 73x30 */
|
||
.logo-en {
|
||
width: 146rpx;
|
||
height: 60rpx;
|
||
}
|
||
/* 中文 logo 72x12 - 左侧带分隔线 */
|
||
.logo-cn {
|
||
width: 144rpx;
|
||
height: 24rpx;
|
||
margin-left: 12rpx;
|
||
padding-left: 12rpx;
|
||
border-left: 1rpx solid #ff6800;
|
||
}
|
||
|
||
/* 内容层 */
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
/* 大标题 - 28px Heavy gradient linear-gradient(90deg, #000000 0%, #7C3300 100%) 自动宽度居中 */
|
||
.hero-title {
|
||
display: block;
|
||
margin: 236rpx auto 0;
|
||
width: fit-content;
|
||
max-width: 100%;
|
||
font-size: 56rpx;
|
||
font-weight: 900;
|
||
color: #1a1a1a;
|
||
line-height: 1.4;
|
||
background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(124, 51, 0, 1) 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 副标题 - 10px Regular #000000 自动宽度居中 */
|
||
.hero-subtitle {
|
||
display: block;
|
||
margin: 12rpx auto 0;
|
||
width: fit-content;
|
||
max-width: 670rpx; /* 750 - 两侧留白 80rpx，避免用 calc（部分手机浏览器解析失败） */
|
||
font-size: 20rpx;
|
||
color: #000000;
|
||
line-height: 1.4;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 4个指标 - 居中布局带分隔线 */
|
||
.hero-stats {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
margin-top: 64rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
.stat-item {
|
||
position: relative;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
}
|
||
.stat-value-wrap {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
}
|
||
/* 数值 - 18px Bold #FF6800 */
|
||
.stat-value {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #ff6800;
|
||
line-height: 1.2;
|
||
}
|
||
/* 单位 - 10px Bold #FF6800 */
|
||
.stat-unit {
|
||
margin-left: 2rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 700;
|
||
color: #ff6800;
|
||
line-height: 1.2;
|
||
}
|
||
/* 标签 - 8px Regular #000000 */
|
||
.stat-label {
|
||
margin-top: 18rpx;
|
||
font-size: 16rpx;
|
||
color: #000000;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
}
|
||
/* 分隔线 - 0.5px #D7D7D7 */
|
||
.stat-divider {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 20rpx;
|
||
width: 1rpx;
|
||
height: 40rpx;
|
||
background: #d7d7d7;
|
||
}
|
||
</style>
|