You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
701 lines
21 KiB
701 lines
21 KiB
<script setup>
|
|
// 导入视差滚动和动画库
|
|
import { onMounted, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { initParallax, initAOS } from '../../plugins/animation.js';
|
|
|
|
|
|
import { useConfigStore } from '@/stores/config'
|
|
const { configParams } = useConfigStore()
|
|
|
|
// 导入服务部分组件
|
|
import ServiceSection from '../../components/home/ServiceSection.vue';
|
|
|
|
import CaseSection from '@/components/home/CaseSection.vue';
|
|
// 导入CTA组件
|
|
import CallToAction from '../../components/CallToAction.vue';
|
|
// 导入客户评价组件
|
|
import CustomerReviews from '../../components/CustomerReviews.vue';
|
|
|
|
// 获取路由实例
|
|
const router = useRouter();
|
|
|
|
// 创建服务部分的引用
|
|
const serviceSection = ref(null);
|
|
|
|
import api from '@/api'
|
|
|
|
const serviceProcess = ref([])
|
|
|
|
const getServiceProcess = async () => {
|
|
const res = await api.getServiceProcess()
|
|
serviceProcess.value = res.data
|
|
}
|
|
|
|
// 滚动到服务部分
|
|
const scrollToServices = () => {
|
|
// 使用服务组件的DOM元素
|
|
const element = document.querySelector('.services-section');
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
};
|
|
|
|
// 导航到联系页面
|
|
const navigateToContact = () => {
|
|
router.push('/contact');
|
|
};
|
|
|
|
onMounted(() => {
|
|
// 初始化动画和视差效果
|
|
initAOS();
|
|
initParallax();
|
|
getServiceProcess()
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="home">
|
|
<!-- 英雄区域（带视差效果） -->
|
|
<section class="hero-section parallax-container">
|
|
<!-- 添加一个注释：确保视差容器不会阻止按钮点击 -->
|
|
<div class="parallax-bg"
|
|
:style="{ backgroundImage: `url(${configParams.home_banner_bg && configParams.home_banner_bg.split(',')[0]})` }"
|
|
data-depth="0.4"></div>
|
|
<div class="hero-overlay"></div>
|
|
<div class="hero-content hero-content-fixed" data-aos="fade-up" data-aos-duration="1000">
|
|
<h1 class="hero-title">数字化转型的<span class="highlight">可靠伙伴</span></h1>
|
|
<p class="hero-subtitle" data-aos="fade-up" data-aos-delay="200">{{ configParams.home_banner_subtitle }}</p>
|
|
<div class="cta-buttons" data-aos="fade-up" data-aos-delay="400">
|
|
<button class="btn primary" @click="scrollToServices">了解更多</button>
|
|
<button class="btn secondary" @click="navigateToContact">联系我们</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 我们的服务（视差滚动） -->
|
|
<!-- <ServiceSection /> -->
|
|
|
|
<!-- 精选案例展示 -->
|
|
<CaseSection />
|
|
|
|
<!-- 我们的优势（视差背景） -->
|
|
<section class="advantages-section parallax-container">
|
|
<div class="parallax-bg" :style="{ backgroundImage: `url(${configParams.home_advantages_bg})` }" data-depth="0.1"></div>
|
|
<div class="overlay-dark"></div>
|
|
<div class="container hero-content-fixed">
|
|
<div class="section-content">
|
|
<div class="section-header" data-aos="fade-up">
|
|
<h2 style="color: #fff;">我们的优势</h2>
|
|
<p>为什么选择瀚海黎明</p>
|
|
</div>
|
|
|
|
<div class="advantages-grid" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="advantage-card" data-aos="fade-right"
|
|
v-for="(item, index) in serviceProcess"
|
|
:key="item.id"
|
|
:data-aos-delay="100 * (index + 1)">
|
|
<div class="advantage-number">{{ item.num }}</div>
|
|
<h3>{{ item.title }}</h3>
|
|
<p>{{ item.info }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="advantages-grid" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="advantage-card" data-aos="fade-right" data-aos-delay="100">
|
|
<div class="advantage-number">01</div>
|
|
<h3>专业团队</h3>
|
|
<p>由经验丰富的开发人员、设计师和项目经理组成的精英团队</p>
|
|
</div>
|
|
<div class="advantage-card" data-aos="fade-right" data-aos-delay="200">
|
|
<div class="advantage-number">02</div>
|
|
<h3>质量保证</h3>
|
|
<p>严格的质量控制流程，确保交付高质量的软件产品</p>
|
|
</div>
|
|
<div class="advantage-card" data-aos="fade-right" data-aos-delay="300">
|
|
<div class="advantage-number">03</div>
|
|
<h3>按时交付</h3>
|
|
<p>高效的项目管理，确保项目按时、按预算完成</p>
|
|
</div>
|
|
<div class="advantage-card" data-aos="fade-left" data-aos-delay="400">
|
|
<div class="advantage-number">04</div>
|
|
<h3>灵活合作模式</h3>
|
|
<p>根据客户需求提供灵活的合作方式和定价模式</p>
|
|
</div>
|
|
<div class="advantage-card" data-aos="fade-left" data-aos-delay="500">
|
|
<div class="advantage-number">05</div>
|
|
<h3>技术创新</h3>
|
|
<p>持续关注最新技术趋势，为客户提供创新解决方案</p>
|
|
</div>
|
|
<div class="advantage-card" data-aos="fade-left" data-aos-delay="600">
|
|
<div class="advantage-number">06</div>
|
|
<h3>售后支持</h3>
|
|
<p>提供全面的售后支持和维护服务，确保系统稳定运行</p>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 客户评价 -->
|
|
<!-- <CustomerReviews /> -->
|
|
|
|
<!-- 合作流程（视差滚动） -->
|
|
<section class="process-section" data-aos="fade-up">
|
|
<div class="section-header">
|
|
<h2>合作流程</h2>
|
|
<p>简单高效的项目合作流程</p>
|
|
</div>
|
|
<div class="process-flow">
|
|
|
|
<div class="process-step"
|
|
data-aos="fade-right"
|
|
v-for="(item, index) in serviceProcess"
|
|
:key="item.id"
|
|
:data-aos-delay="100 * (index + 1)">
|
|
<div class="step-number">{{ item.num }}</div>
|
|
<div class="step-content">
|
|
<h3>{{ item.title }}</h3>
|
|
<p>{{ item.info }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="process-step" data-aos="fade-right" data-aos-delay="100">
|
|
<div class="step-number">01</div>
|
|
<div class="step-content">
|
|
<h3>需求分析</h3>
|
|
<p>深入了解您的业务需求和目标，确定项目范围和技术方案</p>
|
|
</div>
|
|
</div>
|
|
<div class="process-step" data-aos="fade-right" data-aos-delay="200">
|
|
<div class="step-number">02</div>
|
|
<div class="step-content">
|
|
<h3>方案设计</h3>
|
|
<p>制定详细技术方案和项目计划，包括功能规格、UI设计和技术架构</p>
|
|
</div>
|
|
</div>
|
|
<div class="process-step" data-aos="fade-right" data-aos-delay="300">
|
|
<div class="step-number">03</div>
|
|
<div class="step-content">
|
|
<h3>开发实施</h3>
|
|
<p>按照敏捷开发方法，迭代开发并定期交付可测试的版本</p>
|
|
</div>
|
|
</div>
|
|
<div class="process-step" data-aos="fade-left" data-aos-delay="400">
|
|
<div class="step-number">04</div>
|
|
<div class="step-content">
|
|
<h3>测试验收</h3>
|
|
<p>进行全面的功能测试、性能测试和安全测试，确保产品质量</p>
|
|
</div>
|
|
</div>
|
|
<div class="process-step" data-aos="fade-left" data-aos-delay="500">
|
|
<div class="step-number">05</div>
|
|
<div class="step-content">
|
|
<h3>交付上线</h3>
|
|
<p>系统部署上线，提供用户培训和文档，确保平稳过渡</p>
|
|
</div>
|
|
</div>
|
|
<div class="process-step" data-aos="fade-left" data-aos-delay="600">
|
|
<div class="step-number">06</div>
|
|
<div class="step-content">
|
|
<h3>持续支持</h3>
|
|
<p>提供持续的技术支持和系统维护，确保系统稳定运行</p>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 使用通用的CallToAction组件 -->
|
|
<CallToAction
|
|
title="准备好开始您的数字化转型了吗？"
|
|
description="瀚海黎明为您提供专业的软件开发服务"
|
|
primaryButtonText="开始项目咨询"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 全局样式 */
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
|
|
h2 {
|
|
font-size: 2.5rem;
|
|
color: #2c3e50;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.2rem;
|
|
color: #7f8c8d;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
padding: 14px 32px;
|
|
border-radius: 30px;
|
|
font-weight: 600;
|
|
cursor: pointer !important; /* 确保鼠标悬停时显示小手 */
|
|
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
border: none;
|
|
margin: 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-size: 1rem;
|
|
letter-spacing: 1px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
|
z-index: 30; /* 确保按钮在最上层 */
|
|
pointer-events: auto; /* 确保可以接收鼠标事件 */
|
|
|
|
&.primary {
|
|
background-color: #3498db;
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: #2980b9;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
&.secondary {
|
|
background-color: transparent;
|
|
color: white;
|
|
border: 2px solid white;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 英雄区域样式 */
|
|
.hero-section {
|
|
height: 100vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 确保视差容器不会阻止点击事件 */
|
|
.parallax-container {
|
|
pointer-events: none; /* 默认不接收鼠标事件，让事件穿透到下层元素 */
|
|
|
|
.hero-content,
|
|
.hero-content * {
|
|
pointer-events: auto; /* 恢复内容区域的鼠标事件 */
|
|
}
|
|
}
|
|
|
|
.parallax-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
// background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80');
|
|
background-size: cover;
|
|
background-position: center;
|
|
z-index: -2;
|
|
transform: scale(1.1);
|
|
/* 轻微放大背景，增强视差效果 */
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.hero-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
|
|
z-index: -1;
|
|
}
|
|
|
|
.hero-content {
|
|
z-index: 1;
|
|
padding: 0 20px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: calc(100% - 40px);
|
|
/* 使用!important确保transform属性不被AOS动画库覆盖 */
|
|
}
|
|
|
|
/* 添加额外的样式来修复AOS动画结束后的位置问题 */
|
|
[data-aos].aos-animate {
|
|
transform: none;
|
|
}
|
|
|
|
/* 特定针对hero-content中的元素恢复正确的transform */
|
|
.hero-content[data-aos].aos-animate {
|
|
transform: translate(-50%, -50%) !important;
|
|
}
|
|
|
|
/* 添加固定定位样式确保hero-content始终居中 */
|
|
.hero-content-fixed {
|
|
position: absolute !important;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
width: calc(100% - 40px) !important;
|
|
z-index: 10 !important; /* 提高z-index确保内容在最上层 */
|
|
pointer-events: auto !important; /* 确保可以接收鼠标事件 */
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 4rem;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
|
|
letter-spacing: 1px;
|
|
color: #fff;
|
|
|
|
.highlight {
|
|
color: #3498db;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background-color: #3498db;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.6rem;
|
|
margin-bottom: 40px;
|
|
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
position: relative;
|
|
z-index: 20; /* 确保按钮在最上层 */
|
|
pointer-events: auto; /* 确保可以接收鼠标事件 */
|
|
}
|
|
|
|
|
|
/* 优势部分样式 */
|
|
.advantages-section {
|
|
position: relative;
|
|
padding: 100px 20px;
|
|
color: white;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
/* 确保文本居中 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* 确保子元素水平居中 */
|
|
width: 100%;
|
|
/* 确保宽度占满容器 */
|
|
box-sizing: border-box;
|
|
/* 确保padding不会增加元素总宽度 */
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.parallax-bg {
|
|
// background-image: url('https://images.unsplash.com/photo-1504639725590-34d0984388bd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80');
|
|
filter: brightness(0.3);
|
|
/* 降低亮度以增加对比度 */
|
|
}
|
|
|
|
/* 移动端隐藏优势部分 */
|
|
@media (max-width: 768px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.overlay-dark {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
|
|
z-index: 0;
|
|
}
|
|
|
|
.section-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
/* 提高z-index确保内容在叠加层之上 */
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
/* 确保宽度占满容器 */
|
|
padding: 0 15px;
|
|
/* 添加内边距，确保在小屏幕上内容不会贴边 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* 确保子元素水平居中 */
|
|
box-sizing: border-box;
|
|
/* 确保padding不会增加元素总宽度 */
|
|
left: 0;
|
|
/* 确保不会有偏移 */
|
|
right: 0;
|
|
/* 确保不会有偏移 */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
/* 确保文本居中 */
|
|
}
|
|
|
|
.advantages-grid {
|
|
display: grid;
|
|
gap: 30px;
|
|
margin-top: 40px;
|
|
justify-content: center;
|
|
/* 确保网格居中 */
|
|
max-width: 1200px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
/* 确保宽度占满容器 */
|
|
grid-template-columns: repeat(3, 1fr);
|
|
/* 固定为3列布局 */
|
|
box-sizing: border-box;
|
|
/* 确保padding不会增加元素总宽度 */
|
|
|
|
@media (max-width: 992px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
/* 中等屏幕2列 */
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
grid-template-columns: 1fr;
|
|
/* 小屏幕1列 */
|
|
}
|
|
}
|
|
|
|
.advantage-card {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
/* 更深的背景色以增加对比度 */
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
transition: transform 0.3s ease;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
/* 添加阴影增强可见性 */
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
/* 添加细边框增强可见性 */
|
|
|
|
&:hover {
|
|
transform: translateY(-10px);
|
|
background: rgba(0, 0, 0, 0.6);
|
|
/* 悬停时背景更深 */
|
|
}
|
|
|
|
.advantage-number {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
color: rgba(52, 152, 219, 0.7);
|
|
/* 使用品牌蓝色，增加可见性 */
|
|
margin-bottom: 15px;
|
|
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
|
|
/* 添加文字阴影 */
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 15px;
|
|
color: #ffffff;
|
|
/* 确保标题为纯白色 */
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
/* 添加文字阴影增强可读性 */
|
|
}
|
|
|
|
p {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
/* 段落文字颜色 */
|
|
line-height: 1.6;
|
|
/* 增加行高提高可读性 */
|
|
font-size: 1rem;
|
|
/* 设置合适的字体大小 */
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
/* 轻微文字阴影 */
|
|
}
|
|
}
|
|
|
|
/* 客户评价部分样式 */
|
|
.testimonials-section {
|
|
position: relative;
|
|
padding: 100px 20px;
|
|
color: white;
|
|
overflow: hidden;
|
|
|
|
.parallax-bg {
|
|
//background-image: url('https://images.unsplash.com/photo-1557682250-33bd709cbe85?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80');
|
|
filter: brightness(0.4);
|
|
}
|
|
|
|
.testimonials-slider {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 30px;
|
|
justify-content: center;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.testimonial-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
flex: 1;
|
|
min-width: 300px;
|
|
max-width: 400px;
|
|
|
|
.testimonial-rating {
|
|
color: #f1c40f;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.testimonial-text {
|
|
font-style: italic;
|
|
margin-bottom: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.testimonial-author {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.author-avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
margin-right: 15px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.author-info {
|
|
h4 {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
p {
|
|
opacity: 0.8;
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 合作流程部分样式 */
|
|
.process-section {
|
|
padding: 100px 20px;
|
|
background-color: #f8f9fa;
|
|
|
|
.process-flow {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
margin-top: 40px;
|
|
max-width: 1200px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.process-step {
|
|
display: flex;
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.step-number {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #3498db;
|
|
margin-right: 20px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.step-content {
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 10px;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
p {
|
|
color: #7f8c8d;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 768px) {
|
|
.hero-content {
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
|
|
.cases-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.process-step {
|
|
flex-direction: column;
|
|
|
|
.step-number {
|
|
margin-right: 0;
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|