huasheng-erp-order-system-applet/pages/index/index.vue

<template>
	<view class="home-page">
		<scroll-view class="main-scroll" scroll-y :show-scrollbar="false" :enhanced="true">
			<!-- 1. 灵动大屏轮播 (无缝全屏感) -->
			<view class="hero-section">
				<swiper class="hero-swiper" circular autoplay interval="5000" duration="800"
					@change="handleBannerChange">
					<swiper-item v-for="(item, index) in banners" :key="index">
						<view class="hero-card">
							<image :src="item.url" mode="aspectFill" class="hero-img"></image>
							<view class="hero-overlay"></view>
							<view class="hero-text-content">
								<text class="hero-tag">{{ item.tag }}</text>
								<text class="hero-main-title">{{ item.title }}</text>
								<text class="hero-sub-title">{{ item.subTitle }}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<!-- 胶囊样式指示器 -->
				<view class="hero-indicators">
					<view v-for="(item, index) in banners" :key="index" class="indicator-pill"
						:class="{ active: currentBanner === index }"></view>
				</view>
			</view>

			<!-- 2. 精英咨询入口 (悬浮毛玻璃效果) -->
			<view class="contact-card" @click="callService">
				<view class="contact-info">
					<view class="contact-icon-box">
						<image src="https://img.icons8.com/ios-filled/50/C1001C/phone.png" mode="aspectFit"></image>
					</view>
					<view class="contact-texts">
						<text class="main-txt">尊享 VIP 咨询服务</text>
						<text class="sub-txt">15年行业专家 为您定制型材解决方案</text>
					</view>
				</view>
				<view class="call-btn-circle">
					<image src="https://img.icons8.com/ios-glyphs/30/ffffff/phone--v1.png" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 3. 魔幻型材空间 (2x2 魔方布局) -->
			<view class="cube-section">
				<view class="section-header">
					<view class="title-with-line">
						<text class="zh">精选分类</text>
						<text class="en">CATEGORIES</text>
					</view>
				</view>

				<view class="cube-container">
					<view class="cube-grid">
						<view class="cube-card" v-for="(item, index) in cubeProducts" :key="index" @click="goToOrder">
							<image :src="item.image" mode="aspectFill" class="cube-bg"></image>
							<view class="cube-mask"></view>
							<view class="cube-content">
								<text class="cube-title">{{ item.name }}</text>
								<view class="cube-line"></view>
								<text class="cube-desc">{{ item.desc }}</text>
							</view>
							<view class="cube-arrow">→</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 4. 品牌硬实力 (深色大气卡片) -->
			<view class="brand-strength">
				<view class="strength-card">
					<view class="s-header">
						<text class="s-title">华晟 · 硬核实力</text>
						<text class="s-subtitle">Reliable Quality & Professional Service</text>
					</view>
					<view class="s-stats">
						<view class="stat-box">
							<text class="num">15<text class="unit">年</text></text>
							<text class="label">专注型材研发</text>
						</view>
						<view class="stat-divider"></view>
						<view class="stat-box">
							<text class="num">3<text class="unit">大</text></text>
							<text class="label">现代生产基地</text>
						</view>
						<view class="stat-divider"></view>
						<view class="stat-box">
							<text class="num">500<text class="unit">+</text></text>
							<text class="label">合作伙伴认可</text>
						</view>
					</view>
					<view class="s-footer">
						<text>品质铸就品牌 · 服务创造价值</text>
					</view>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="safe-bottom-gap"></view>
		</scroll-view>

		<!-- 底部通用导航 -->
		<erp-tab-bar active="home"></erp-tab-bar>
	</view>
</template>

<script>
import ErpTabBar from '@/components/erp-tab-bar/erp-tab-bar.vue';
import assets from '@/utils/assets.js';
import banners from '@/mock/banners.json';
import cubeProducts from '@/json/cube-products.json';

export default {
	components: { ErpTabBar },
	data() {
		return {
			assets,
			statusBarHeight: 0,
			currentBanner: 0,
			banners,
			cubeProducts
		}
	},
	onLoad() {
	},
	methods: {
		handleBannerChange(e) { this.currentBanner = e.detail.current; },
		callService() {
			uni.showModal({
				title: '管家式服务',
				content: '即将为您拨打华晟型材专家电话 13888888888',
				confirmText: '立即咨询',
				confirmColor: '#C1001C',
				cancelText: '稍后再说',
				cancelColor: '#999',
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({ phoneNumber: '13888888888' });
					}
				}
			});
		},
		goToOrder() { uni.reLaunch({ url: '/pages/order/index' }); }
	}
}
</script>

<style scoped>
.home-page {
	width: 100vw;
	height: 100vh;
	background-color: #F8FAFC;
	display: flex;
	flex-direction: column;
}

.main-scroll {
	flex: 1;
	height: 0;
}

/* 英雄轮播区 */
.hero-section {
	position: relative;
	width: 100%;
	height: 500rpx;
	overflow: hidden;
}

.hero-swiper {
	height: 100%;
}

.hero-card {
	position: relative;
	width: 100%;
	height: 100%;
}

.hero-img {
	width: 100%;
	height: 100%;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}

.hero-text-content {
	position: absolute;
	left: 40rpx;
	bottom: 80rpx;
	color: #fff;
	z-index: 2;
}

.hero-tag {
	font-size: 20rpx;
	background: rgba(193, 0, 28, 0.8);
	padding: 4rpx 16rpx;
	border-radius: 4rpx;
	margin-bottom: 12rpx;
	display: inline-block;
}

.hero-main-title {
	font-size: 44rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
}

.hero-sub-title {
	font-size: 24rpx;
	opacity: 0.8;
	letter-spacing: 1rpx;
}

.hero-indicators {
	position: absolute;
	bottom: 40rpx;
	right: 40rpx;
	display: flex;
	gap: 8rpx;
}

.indicator-pill {
	width: 12rpx;
	height: 6rpx;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 4rpx;
	transition: 0.3s;
}

.indicator-pill.active {
	width: 32rpx;
	background: #fff;
}

/* 咨询卡片 */
.contact-card {
	margin: -40rpx 40rpx 40rpx;
	position: relative;
	z-index: 10;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(20px);
	border-radius: 24rpx;
	padding: 32rpx 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1rpx solid #fff;
	box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.06);
}

.contact-info {
	display: flex;
	align-items: center;
}

.contact-icon-box {
	width: 88rpx;
	height: 88rpx;
	background: #FFF1F2;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
}

.contact-icon-box image {
	width: 44rpx;
	height: 44rpx;
}

.main-txt {
	font-size: 30rpx;
	font-weight: bold;
	color: #1a1a1a;
	display: block;
	margin-bottom: 4rpx;
}

.sub-txt {
	font-size: 22rpx;
	color: #7a7a7a;
}

.call-btn-circle {
	width: 72rpx;
	height: 72rpx;
	background: #C1001C;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6rpx 12rpx rgba(193, 0, 28, 0.3);
}

.call-btn-circle image {
	width: 32rpx;
	height: 32rpx;
}

/* 魔方布局 */
.cube-section {
	padding: 20rpx 40rpx;
}

.section-header {
	margin-bottom: 30rpx;
}

.title-with-line {
	display: flex;
	align-items: baseline;
	gap: 16rpx;
}

.title-with-line .zh {
	font-size: 36rpx;
	font-weight: 800;
	color: #1a1a1a;
}

.title-with-line .en {
	font-size: 20rpx;
	color: #999;
	font-family: 'Georgia';
	letter-spacing: 2rpx;
}

.cube-container {
	width: 100%;
}

.cube-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.cube-card {
	position: relative;
	height: 320rpx;
	border-radius: 20rpx;
	overflow: hidden;
	background: #eee;
	transition: 0.3s;
}

.cube-bg {
	width: 100%;
	height: 100%;
}

.cube-mask {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
}

.cube-content {
	position: absolute;
	left: 30rpx;
	top: 30rpx;
	z-index: 2;
}

.cube-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 12rpx;
	display: block;
}

.cube-line {
	width: 40rpx;
	height: 4rpx;
	background: #C1001C;
	margin-bottom: 12rpx;
}

.cube-desc {
	font-size: 20rpx;
	color: rgba(255, 255, 255, 0.8);
	max-width: 240rpx;
	line-height: 1.4;
	display: block;
}

.cube-arrow {
	position: absolute;
	right: 30rpx;
	bottom: 30rpx;
	color: #fff;
	font-size: 30rpx;
	opacity: 0.6;
}

/* 企业实力 */
.brand-strength {
	padding: 40rpx;
	margin-bottom: 40rpx;
}

.strength-card {
	background: #1a1a1a;
	border-radius: 32rpx;
	padding: 48rpx 40rpx;
	color: #fff;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
}

.s-header {
	margin-bottom: 50rpx;
}

.s-title {
	font-size: 34rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
	color: #fff;
	letter-spacing: 4rpx;
}

.s-subtitle {
	font-size: 18rpx;
	color: #666;
	font-family: 'Arial';
	text-transform: uppercase;
}

.s-stats {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}

.stat-box {
	text-align: center;
	flex: 1;
}

.stat-box .num {
	font-size: 44rpx;
	font-weight: 800;
	color: #FFD700;
	display: block;
	margin-bottom: 4rpx;
}

.stat-box .unit {
	font-size: 20rpx;
	margin-left: 4rpx;
	font-weight: normal;
}

.stat-box .label {
	font-size: 22rpx;
	color: #ababab;
}

.stat-divider {
	width: 1rpx;
	height: 50rpx;
	background: rgba(255, 255, 255, 0.1);
}

.s-footer {
	border-top: 1rpx solid rgba(255, 255, 255, 0.05);
	padding-top: 30rpx;
	text-align: center;
}

.s-footer text {
	font-size: 18rpx;
	color: #555;
	letter-spacing: 6rpx;
}

.safe-bottom-gap {
	height: 140rpx;
}
</style>