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';

	export default {
		components: { ErpTabBar },
		data() {
			return {
				assets,
				statusBarHeight: 0,
				currentBanner: 0,
				banners: [
					{ 
						url: '/static/index/banner2.jpg', 
						tag: '建筑美学', 
						title: '高端系统门窗', 
						subTitle: '智造美好生活空间' 
					},
					{ 
						url: '/static/index/banner1.jpg', 
						tag: '领航品质', 
						title: '工业铝型材定制', 
						subTitle: '提供一站式工业型材解决方案' 
					}
				],
				cubeProducts: [
					{ name: '建筑铝材', desc: '门窗/幕墙/家装', image: '/static/index/cube1.jpg' },
					{ name: '工业型材', desc: '光伏/轨道/汽配', image: '/static/index/cube2.jpg' },
					{ name: '特种定制', desc: '精密开模/特种合金', image: '/static/index/cube3.jpg' },
					{ name: '深加工', desc: '切割/冲压/CNC', image: '/static/index/cube4.jpg' }
				]
			}
		},
		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/order' }); }
		}
	}
</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>