'首页样式'
This commit is contained in:
@@ -1,38 +1,46 @@
|
||||
<template>
|
||||
<!-- Hero 首屏 - 设计稿风格 -->
|
||||
<!-- Hero 首屏 - Figma 1423:452 -->
|
||||
<view class="hero">
|
||||
<!-- 顶部 Logo -->
|
||||
<view class="hero-logo">
|
||||
<text class="logo-en">inkreach</text>
|
||||
<text class="logo-cn">印美达全球</text>
|
||||
</view>
|
||||
<!-- 渐变背景层 -->
|
||||
<view class="hero-gradient-bg"></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>
|
||||
|
||||
<!-- 地球背景图 -->
|
||||
<!-- 地球背景图 (y:228, 390x390) -->
|
||||
<view class="hero-earth">
|
||||
<image
|
||||
class="earth-img"
|
||||
src="/static/images/home/Rectangle_178_1426_1248.png"
|
||||
mode="widthFix"
|
||||
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>
|
||||
|
||||
@@ -44,6 +52,19 @@ export default {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 20
|
||||
}
|
||||
},
|
||||
created() {
|
||||
try {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = sysInfo.statusBarHeight || 20
|
||||
} catch (e) {
|
||||
this.statusBarHeight = 20
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -52,87 +73,156 @@ export default {
|
||||
.hero {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 30rpx;
|
||||
padding-bottom: 0;
|
||||
height: 1196rpx;
|
||||
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 {
|
||||
/* 渐变背景 - 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: calc(100% - 80rpx);
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user