827 lines
20 KiB
Vue
827 lines
20 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 滚动进度条 -->
|
||
<div class="scroll-progress-bar" data-scroll-progress="bar"></div>
|
||
|
||
<ihead></ihead>
|
||
|
||
<!-- 现代化横幅区域 -->
|
||
<div class="banner" data-parallax="0.3">
|
||
<swiper ref="swiper" :options="swiperOption">
|
||
<swiper-slide v-for="banner in banners" :key="banner.img">
|
||
<div class="banner-content">
|
||
<img :src="banner.img" width="100%" />
|
||
<div class="banner-overlay">
|
||
<div class="banner-text">
|
||
<h1 class="banner-title animate fade-in-down">{{banner.title}}</h1>
|
||
<p class="banner-subtitle animate fade-in-up delay-1s">{{banner.subtitle}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</swiper-slide>
|
||
|
||
<div class="swiper-button-prev" slot="button-prev"></div>
|
||
<div class="swiper-button-next" slot="button-next"></div>
|
||
<div class="swiper-pagination" slot="pagination"></div>
|
||
</swiper>
|
||
</div>
|
||
|
||
<!-- 公司介绍区域 -->
|
||
<div class="company-intro">
|
||
<div class="container">
|
||
<div class="intro-header">
|
||
<h2 class="section-title animate-on-scroll">技术驱动未来，服务创造价值</h2>
|
||
<p class="section-subtitle animate-on-scroll">上海丙维数字科技有限公司成立于2018年，专注于AI交付内容，为客户提供高质量的数字化解决方案</p>
|
||
</div>
|
||
|
||
<div class="intro-content animate-stagger">
|
||
<div class="intro-card hover-lift">
|
||
<div class="card-icon animate pulse infinite">🏢</div>
|
||
<h3>公司概况</h3>
|
||
<p>成立于2018年10月22日，注册资本600万元人民币，总部位于上海市宝山区高逸路112-118号3幢6422室</p>
|
||
</div>
|
||
|
||
<div class="intro-card hover-lift">
|
||
<div class="card-icon animate pulse infinite delay-1s">🎯</div>
|
||
<h3>核心使命</h3>
|
||
<p>致力于计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务</p>
|
||
</div>
|
||
|
||
<div class="intro-card hover-lift">
|
||
<div class="card-icon animate pulse infinite delay-2s">🚀</div>
|
||
<h3>AI转型</h3>
|
||
<p>2022年成功转型AI交付领域，围绕客户需求提供智能应用解决方案</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心优势展示 -->
|
||
<div class="core-advantages">
|
||
<div class="container">
|
||
<h2 class="section-title animate-on-scroll">核心优势</h2>
|
||
<div class="advantages-grid animate-stagger">
|
||
<div class="advantage-item hover-scale" v-for="advantage in advantages" :key="advantage.title">
|
||
<div class="advantage-icon animate bounce delay-1s">{{advantage.icon}}</div>
|
||
<h3>{{advantage.title}}</h3>
|
||
<p>{{advantage.description}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 业务领域展示 -->
|
||
<div class="business-areas">
|
||
<div class="container">
|
||
<h2 class="section-title animate-on-scroll">业务领域</h2>
|
||
<div class="areas-grid animate-stagger">
|
||
<div class="area-item hover-glow" v-for="area in businessAreas" :key="area.name">
|
||
<div class="area-icon animate wobble delay-2s">{{area.icon}}</div>
|
||
<h3>{{area.name}}</h3>
|
||
<p>{{area.description}}</p>
|
||
<ul class="area-features">
|
||
<li v-for="feature in area.features" :key="feature">{{feature}}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 原有产品展示区域 -->
|
||
<div class="scrollToContentWrapper">
|
||
<a href="javascript:void(0)" id="scrollToBoxes" class="scrollToContent bottomShadowSegmentLight animate bounce infinite">
|
||
<img src="../assets/img/svg/ic_caret.svg" alt="">
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 产品展示区域 -->
|
||
<div class="products-section">
|
||
<div class="container">
|
||
<h2 class="section-title animate-on-scroll">核心解决方案</h2>
|
||
<p class="section-subtitle animate-on-scroll">为不同行业提供专业的技术解决方案，助力企业数字化转型</p>
|
||
|
||
<div id="pageBoxesContainer" class="page pageBoxes animate-stagger">
|
||
<div class="box hover-lift" v-for="product in productData" :key="product.name">
|
||
<div class="product-image">
|
||
<img width="100%" :src="product.img" />
|
||
<div class="product-overlay">
|
||
<div class="overlay-content">
|
||
<span class="view-more">了解更多</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="boxTableHeader">
|
||
<div class="h2">{{product.name}}</div>
|
||
<div class="product-description">{{product.description}}</div>
|
||
<div class="product-tags">
|
||
<span v-for="tag in product.tags" :key="tag" class="tag">{{tag}}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<a v-if="product.isLink||product.url.indexOf('http')>-1" target="view_window" :href="product.url"></a>
|
||
<router-link v-else :to="product.url"> </router-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 联系我们区域 -->
|
||
<div class="contact-section">
|
||
<div class="container">
|
||
<h2 class="section-title animate-on-scroll">联系我们</h2>
|
||
<div class="contact-info animate-stagger">
|
||
<div class="contact-item hover-scale">
|
||
<div class="contact-icon animate heartBeat infinite">📍</div>
|
||
<div>
|
||
<h4>注册地址</h4>
|
||
<p>上海市宝山区高逸路112-118号3幢6422室</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item hover-scale">
|
||
<div class="contact-icon animate heartBeat infinite delay-1s">📞</div>
|
||
<div>
|
||
<h4>联系电话</h4>
|
||
<p>13817819452</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item hover-scale">
|
||
<div class="contact-icon animate heartBeat infinite delay-2s">🌐</div>
|
||
<div>
|
||
<h4>官方网站</h4>
|
||
<p>www.bimwe.com</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ifooter></ifooter>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import VueAwesomeSwiper from 'vue-awesome-swiper'
|
||
import ResponsiveHelper from '../static/responsive_helper'
|
||
|
||
let banner_index0 = require('../assets/img/banner_index0.png')
|
||
let banner_index1 = require('../assets/img/banner_index1.png')
|
||
let banner_index2 = require('../assets/img/banner_index2.png')
|
||
let banner_index3 = require('../assets/img/banner_index3.png')
|
||
|
||
let boxbg_cleaning = require('../assets/img/boxbg_cleaning.png')
|
||
let boxbg_smartbuildings = require('../assets/img/boxbg_smartbuildings.png')
|
||
let boxbg_iot = require('../assets/img/boxbg_iot.png')
|
||
let boxbg_facilitiesmanagement = require('../assets/img/boxbg_facilitiesmanagement.png')
|
||
let boxbg_errands = require('../assets/img/boxbg_errands.png')
|
||
|
||
export default {
|
||
components: {
|
||
VueAwesomeSwiper,
|
||
ResponsiveHelper,
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
swiperOption: {
|
||
autoplay: 3000,
|
||
speed: 1000,
|
||
loop: true,
|
||
effect: 'fade',
|
||
fadeEffect: {
|
||
crossFade: true
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
},
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
type: 'bullets',
|
||
clickable: true,
|
||
},
|
||
},
|
||
banners: [
|
||
{
|
||
img: banner_index0,
|
||
title: '智能数字化解决方案',
|
||
subtitle: '技术驱动未来，服务创造价值'
|
||
},
|
||
{
|
||
img: banner_index1,
|
||
title: 'AI技术引领者',
|
||
subtitle: '专注AI交付，助力企业数字化转型'
|
||
},
|
||
{
|
||
img: banner_index2,
|
||
title: '顶尖技术团队',
|
||
subtitle: '阿里、字节、腾讯技术精英汇聚'
|
||
},
|
||
{
|
||
img: banner_index3,
|
||
title: '行业解决方案专家',
|
||
subtitle: '金融、制造、零售多行业服务经验'
|
||
},
|
||
],
|
||
advantages: [
|
||
{
|
||
icon: '👥',
|
||
title: '顶尖技术团队',
|
||
description: '由阿里、字节、腾讯等顶尖互联网公司资深开发人员组成，技术积累深厚，项目经验丰富'
|
||
},
|
||
{
|
||
icon: '🤖',
|
||
title: 'AI领域战略转型',
|
||
description: '2022年成功转型，将业务重心聚焦于AI交付领域，围绕客户需求提供定制化智能应用解决方案'
|
||
},
|
||
{
|
||
icon: '🏆',
|
||
title: '客户广泛认可',
|
||
description: '为金融、制造、零售等多个行业的国内外知名企业提供服务，在行业内树立了可靠、专业的品牌形象'
|
||
}
|
||
],
|
||
businessAreas: [
|
||
{
|
||
icon: '💻',
|
||
name: '技术开发与服务',
|
||
description: '从事计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务',
|
||
features: ['系统优化与性能提升', '网络架构设计', '信息安全解决方案', '技术咨询与培训']
|
||
},
|
||
{
|
||
icon: '🧠',
|
||
name: 'AI智能应用',
|
||
description: '专注于人工智能技术，为客户提供定制化的智能解决方案',
|
||
features: ['数据分析与挖掘', '智能推荐系统', '自动化流程', '机器学习模型']
|
||
},
|
||
{
|
||
icon: '🔧',
|
||
name: '系统集成与软件开发',
|
||
description: '提供高效的计算机信息系统集成服务，以及创新的软件开发',
|
||
features: ['系统集成服务', '定制化软件开发', '数字化转型', '技术架构设计']
|
||
}
|
||
],
|
||
productData: [
|
||
{
|
||
name: 'AI集成',
|
||
img: boxbg_cleaning,
|
||
url: '/ourPlan/aiSolutions',
|
||
isLink: false,
|
||
description: '基于人工智能技术，为企业提供智能化的业务解决方案',
|
||
tags: ['机器学习', '深度学习', '智能分析']
|
||
},
|
||
{
|
||
name: '智能建筑',
|
||
img: boxbg_smartbuildings,
|
||
url: '/ourPlan/estateManagement',
|
||
isLink: false,
|
||
description: '通过先进技术打造智能化建筑环境，提升建筑管理效率',
|
||
tags: ['BIM技术', '智能监控', '自动化管理']
|
||
},
|
||
{
|
||
name: '物联网',
|
||
img: boxbg_iot,
|
||
url: '/ourPlan/iot',
|
||
isLink: false,
|
||
description: '连接万物，智能互联，打造数字化未来',
|
||
tags: ['传感器网络', '数据采集', '智能分析']
|
||
},
|
||
{
|
||
name: '设施管理',
|
||
img: boxbg_facilitiesmanagement,
|
||
url: '/ourPlan/facilityManagement',
|
||
isLink: false,
|
||
description: '智能化设施管理，提升运营效率与用户体验',
|
||
tags: ['预防性维护', '智能调度', '成本优化']
|
||
},
|
||
{
|
||
name: '系统集成',
|
||
img: boxbg_errands,
|
||
url: '/ourPlan/technologyIntegration',
|
||
isLink: false,
|
||
description: '专业系统整合，构建统一的企业级平台',
|
||
tags: ['API集成', '数据同步', '统一管理']
|
||
},
|
||
],
|
||
}
|
||
},
|
||
|
||
methods: {},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 横幅样式升级 */
|
||
.banner {
|
||
position: relative;
|
||
height: 80vh;
|
||
min-height: 500px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.banner-content {
|
||
position: relative;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.banner-content img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.banner-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
color: white;
|
||
}
|
||
|
||
.banner-text {
|
||
max-width: 800px;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.banner-title {
|
||
font-size: 3.5rem;
|
||
font-weight: 700;
|
||
margin-bottom: 1rem;
|
||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||
animation: fadeInUp 1s ease-out;
|
||
}
|
||
|
||
.banner-subtitle {
|
||
font-size: 1.5rem;
|
||
font-weight: 300;
|
||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||
animation: fadeInUp 1s ease-out 0.3s both;
|
||
}
|
||
|
||
/* 公司介绍区域 */
|
||
.company-intro {
|
||
padding: 80px 0;
|
||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.intro-header {
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
color: #2c3e50;
|
||
margin-bottom: 1rem;
|
||
position: relative;
|
||
}
|
||
|
||
.section-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -10px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80px;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, #3498db, #2980b9);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 1.2rem;
|
||
color: #6c757d;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.intro-content {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.intro-card {
|
||
background: white;
|
||
padding: 40px 30px;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
text-align: center;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.intro-card:hover {
|
||
transform: translateY(-10px);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.card-icon {
|
||
font-size: 3rem;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.intro-card h3 {
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.intro-card p {
|
||
color: #6c757d;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 核心优势区域 */
|
||
.core-advantages {
|
||
padding: 80px 0;
|
||
background: white;
|
||
}
|
||
|
||
.advantages-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: 40px;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.advantage-item {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.advantage-icon {
|
||
font-size: 4rem;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.advantage-item h3 {
|
||
font-size: 1.8rem;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.advantage-item p {
|
||
color: #6c757d;
|
||
line-height: 1.6;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
/* 业务领域区域 */
|
||
.business-areas {
|
||
padding: 80px 0;
|
||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||
}
|
||
|
||
.areas-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: 40px;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.area-item {
|
||
background: white;
|
||
padding: 40px 30px;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.area-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.area-icon {
|
||
font-size: 3rem;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.area-item h3 {
|
||
font-size: 1.8rem;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.area-item p {
|
||
color: #6c757d;
|
||
line-height: 1.6;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.area-features {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.area-features li {
|
||
color: #495057;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #e9ecef;
|
||
position: relative;
|
||
padding-left: 25px;
|
||
}
|
||
|
||
.area-features li::before {
|
||
content: '✓';
|
||
position: absolute;
|
||
left: 0;
|
||
color: #28a745;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 联系我们区域 */
|
||
.contact-section {
|
||
padding: 80px 0;
|
||
background: white;
|
||
}
|
||
|
||
.contact-info {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 40px;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.contact-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 30px;
|
||
background: #f8f9fa;
|
||
border-radius: 15px;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.contact-item:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.contact-icon {
|
||
font-size: 2.5rem;
|
||
margin-right: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.contact-item h4 {
|
||
font-size: 1.3rem;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.contact-item p {
|
||
color: #6c757d;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 动画效果 */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.banner-title {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.banner-subtitle {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.intro-content,
|
||
.advantages-grid,
|
||
.areas-grid,
|
||
.contact-info {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.company-intro,
|
||
.core-advantages,
|
||
.business-areas,
|
||
.contact-section,
|
||
.products-section {
|
||
padding: 60px 0;
|
||
}
|
||
|
||
.pageBoxes {
|
||
grid-template-columns: 1fr;
|
||
gap: 30px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.boxTableHeader {
|
||
padding: 25px;
|
||
}
|
||
|
||
.product-tags {
|
||
gap: 8px;
|
||
}
|
||
|
||
.tag {
|
||
font-size: 0.8rem;
|
||
padding: 5px 12px;
|
||
}
|
||
}
|
||
|
||
/* 产品展示区域样式 */
|
||
.products-section {
|
||
padding: 80px 0;
|
||
background: white;
|
||
}
|
||
|
||
.pageBoxes {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||
gap: 40px;
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.box {
|
||
background: white;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.box:hover {
|
||
transform: translateY(-10px);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.product-image {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.product-image img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.box:hover .product-image img {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.product-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(52, 152, 219, 0.8);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.box:hover .product-overlay {
|
||
opacity: 1;
|
||
}
|
||
|
||
.overlay-content {
|
||
text-align: center;
|
||
color: white;
|
||
}
|
||
|
||
.view-more {
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
padding: 12px 24px;
|
||
border: 2px solid white;
|
||
border-radius: 25px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.box:hover .view-more {
|
||
background: white;
|
||
color: #3498db;
|
||
}
|
||
|
||
.boxTableHeader {
|
||
padding: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.boxTableHeader .h2 {
|
||
font-size: 1.6rem;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.product-description {
|
||
color: #6c757d;
|
||
line-height: 1.7;
|
||
margin-bottom: 25px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.product-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tag {
|
||
background: #e9ecef;
|
||
color: #495057;
|
||
padding: 6px 14px;
|
||
border-radius: 18px;
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tag:hover {
|
||
background: #3498db;
|
||
color: white;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Swiper 基础样式 */
|
||
.swiper {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.swiper-slide {
|
||
text-align: center;
|
||
font-size: 18px;
|
||
background: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.swiper-button-next,
|
||
.swiper-button-prev {
|
||
color: white;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.swiper-button-next:hover,
|
||
.swiper-button-prev:hover {
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.swiper-pagination {
|
||
bottom: 10%;
|
||
}
|
||
|
||
.swiper-pagination-bullet {
|
||
background: white;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.swiper-pagination-bullet-active {
|
||
opacity: 1;
|
||
background: #3498db;
|
||
}
|
||
</style>
|