nuxt初始化
This commit is contained in:
181
nuxt-web/components/SolutionPageLayout.vue
Normal file
181
nuxt-web/components/SolutionPageLayout.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<script setup lang="ts">
|
||||
type ContentCard = {
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
|
||||
type ProductLink = {
|
||||
title: string
|
||||
description: string
|
||||
to?: string
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
title: string
|
||||
description: string
|
||||
badge: string
|
||||
heroStats?: Array<{ value: string; label: string }>
|
||||
painPoints: ContentCard[]
|
||||
architectureTitle: string
|
||||
architectureSteps: ContentCard[]
|
||||
architectureImage: string
|
||||
architectureImageAlt: string
|
||||
productLinks: ProductLink[]
|
||||
valueItems: ContentCard[]
|
||||
}>()
|
||||
|
||||
const statIconClasses = ['blue ti-stats-up', 'cyan ti-layers', 'indigo ti-shield', 'green ti-money']
|
||||
const painPointIconClasses = ['red ti-server', 'orange ti-time', 'yellow ti-settings', 'purple ti-lock']
|
||||
const productBarClasses = ['blue', 'cyan', 'indigo', 'slate', 'green']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<section class="solution-hero">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 hero-content">
|
||||
<div class="reveal active">
|
||||
<div class="hero-badge">
|
||||
<span class="pulse-dot" />
|
||||
{{ badge }}
|
||||
</div>
|
||||
<h1 class="hero-title">{{ title }}</h1>
|
||||
<p class="hero-desc">{{ description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="heroStats?.length" class="col-md-6 hero-stats hidden-sm hidden-xs">
|
||||
<div class="reveal active">
|
||||
<div class="stats-card-container">
|
||||
<div class="stats-grid">
|
||||
<div v-for="(item, index) in heroStats" :key="`${item.value}-${item.label}`" class="stat-item">
|
||||
<i :class="['stat-icon', ...statIconClasses[index % statIconClasses.length].split(' ')]" />
|
||||
<div class="stat-number">{{ item.value }}</div>
|
||||
<div class="stat-label">{{ item.label }}</div>
|
||||
</div>
|
||||
<div class="stats-center-icon">
|
||||
<i class="ti-server" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pain-points-section" id="solution">
|
||||
<div class="container">
|
||||
<div class="section-header reveal active">
|
||||
<h2>直击行业核心痛点</h2>
|
||||
<p>行业困境亟待破局，数智升级势在必行</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div v-for="(item, index) in painPoints" :key="item.title" class="col-md-3 col-sm-6">
|
||||
<div class="pain-point-card reveal active">
|
||||
<div :class="['pain-point-icon', painPointIconClasses[index % painPointIconClasses.length].split(' ')[0]]">
|
||||
<i :class="painPointIconClasses[index % painPointIconClasses.length].split(' ')[1]" />
|
||||
</div>
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="architecture-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="reveal active">
|
||||
<h2 style="font-size: 32px; font-weight: 700; margin-bottom: 40px; color: #fff;">{{ architectureTitle }}</h2>
|
||||
|
||||
<div v-for="(item, index) in architectureSteps" :key="item.title" class="arch-step">
|
||||
<div :class="['arch-step-number', productBarClasses[index % 3]]">{{ `0${index + 1}` }}</div>
|
||||
<div class="arch-step-content">
|
||||
<h4 :class="productBarClasses[index % 3]">{{ item.title }}</h4>
|
||||
<p>{{ item.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="reveal active">
|
||||
<div class="arch-visual-container">
|
||||
<img :src="architectureImage" :alt="architectureImageAlt">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="products-section" id="products">
|
||||
<div class="container">
|
||||
<div class="section-header-flex reveal active">
|
||||
<div class="section-header-left">
|
||||
<div class="section-label">Product Matrix</div>
|
||||
<h2>部分产品与服务</h2>
|
||||
<p>从智能生产到供应链协同，全方位覆盖港航集团业务场景。</p>
|
||||
</div>
|
||||
<NuxtLink to="/products/logistics" class="view-all-link hidden-xs">
|
||||
查看所有产品 <i class="ti-arrow-right" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div v-for="(item, index) in productLinks" :key="item.title" class="col-md-4">
|
||||
<div class="product-card reveal active">
|
||||
<div :class="['product-card-bar', productBarClasses[index % productBarClasses.length]]" />
|
||||
<div class="product-card-body">
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.description }}</p>
|
||||
<component :is="item.to ? 'NuxtLink' : 'div'" :to="item.to" class="product-card-footer">
|
||||
<span>了解详情</span>
|
||||
<div class="product-card-arrow">
|
||||
<i class="ti-arrow-right" />
|
||||
</div>
|
||||
</component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="advantages-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="section-header reveal active" style="text-align: left; margin-bottom: 40px;">
|
||||
<h2>数字化转型价值</h2>
|
||||
<p>把行业经验沉淀为可复制、可运营、可持续放大的数智能力。</p>
|
||||
</div>
|
||||
<div v-for="item in valueItems" :key="item.title" class="advantage-item">
|
||||
<div class="advantage-check">
|
||||
<i class="ti-check-box" />
|
||||
</div>
|
||||
<div>
|
||||
<h4>{{ item.title }}</h4>
|
||||
<p>{{ item.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="stats-boxes">
|
||||
<div v-for="item in heroStats" :key="`${item.value}-${item.label}-box`" class="stat-box">
|
||||
<div class="stat-number">{{ item.value }}</div>
|
||||
<div class="stat-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user