zhangjianlong
/
multimedia-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页静态效果完成

Browse Source
main
zjlnb666 4 weeks ago
parent 2f23f296ca
commit 88539787ed
20 changed files with 677 additions and 322 deletions
Show Stats Download Patch File Download Diff File

4
index.html
Unescape Escape View File

@ -2,9 +2,9 @@
<html lang=""> <html lang="">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="./src/assets/logo.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>音视频网站 - Flx</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
src/assets/img/AI会议麦克风 1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
src/assets/img/dynamice.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 496 KiB

BIN
src/assets/img/product.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
src/assets/img/product1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
src/assets/img/product2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
src/assets/img/product4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
src/assets/img/productBg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 173 KiB

BIN
src/assets/img/productbg1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
src/assets/img/tc-top.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 604 KiB

6
src/assets/main.css
Unescape Escape View File

@ -5,3 +5,9 @@ body{
margin:auto; margin:auto;
position:relative; position:relative;
} }
button{
cursor: pointer;
&:hover{
transform: scale(1.01);
}
}

1
src/components/HeaderNav.vue
Unescape Escape View File

@ -7,7 +7,6 @@ const handleSelect = (key, keyPath) => {
console.log(key, keyPath) console.log(key, keyPath)
} }
const circleUrl='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' const circleUrl='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
</script> </script>

77
src/components/home/Dynamic.vue
Unescape Escape View File

@ -0,0 +1,77 @@
<script setup>
</script>
<template>
<div class="dynamic">
<p>实验动态</p>
<el-row justify="space-evenly">
<el-col :span=null>
<div class="dynamic-left">
<img src="@/assets/img/dynamice.png" alt="实验动态">
</div>
</el-col>
<el-col :span=null>
<div class="dynamic-right">
<div>
<div class="title">端侧AI降噪模组设计</div>
<div class="text">专为语音收集和处理设计的USB AI降噪麦克风模组，这是一款基于XMOS XU316芯片和Codec芯片的专业音频处理模组。</div>
</div>
<button>更多动态</button>
</div>
</el-col>
</el-row>
</div>
</template>
<style scoped lang="less">
.dynamic{
padding:60px 40.31px;
p{
font-weight: 700;
font-size: 40px;
line-height: 100%;
text-align: center;
margin-bottom: 50px;
}
.dynamic-left{
img{
width: 715px;
height: 467px;
object-fit:cover;
border-radius: 20px;
}
}
.dynamic-right{
color: #000000;
width: 532px;
padding: 20px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
.title{
font-weight: 500;
font-size: 40px;
line-height: 100%;
margin-bottom: 30px;
}
.text{
font-weight: 400;
font-size: 20px;
line-height:1.5em;
}
button{
background: #333333;
border: 1px solid #DEDEDE;
font-weight: 400;
font-size: 20px;
line-height: 100%;
width: 209px;
height: 66px;
border-radius: 86px;
color: #FFFFFF;
}
}
}
</style>

210
src/components/home/ProductDisplay.vue
Unescape Escape View File

@ -0,0 +1,210 @@
<script setup>
</script>
<template>
<div class="productDisplay">
<p class="p">产品展示</p>
<div class="prodList" >
<div class="type-row">
<div>
<div class="title">PH-AIMIC01</div>
<div class="name">AI会议圆阵麦克风</div>
<div class="more">了解更多</div>
</div>
<div class="img">
<img src="@/assets/img/product.png" alt="">
</div>
</div>
<div class="type-row">
<div>
<div class="title">PH-AIMIC01</div>
<div class="name">AI会议圆阵麦克风</div>
<div class="more">了解更多</div>
</div>
<div class="img">
<img src="@/assets/img/product1.png" alt="">
</div>
</div>
<div class="type-col">
<div>
<div class="title">PH-AIMIC01</div>
<div class="name">AI会议圆阵麦克风</div>
<div class="more">了解更多</div>
</div>
<div class="img">
<img src="@/assets/img/product2.png" alt="">
</div>
</div>
<div class="type-short">
<div>
<div class="title">PH-AIMIC01</div>
<div class="name">AI会议圆阵麦克风</div>
<div class="more">了解更多</div>
</div>
<div class="img">
<img src="@/assets/img/product4.png" alt="">
</div>
</div>
<div class="more-produce">
更多产品
</div>
</div>
</div>
</template>
<style scoped lang="less">
.productDisplay{
padding: 60px 40.31px;
.p{
text-align: center;
font-weight: 700;
font-size: 40px;
line-height: 100%;
color: #000000;
}
.prodList{
& >div{
flex-grow: 1;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
& .more{
cursor: pointer;
&:hover{
transform: scale(1.01);
}
}
margin-top: 40px;
height: 565px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 15px;
justify-content: space-between;
.type-row{
padding:40px 30px;
display: flex;
justify-content: space-between;
border-radius: 20px;
width: 730px;
height: 273px;
background-image: url("@/assets/img/productBg.png");
.title{
font-weight: 400;
font-size: 16px;
line-height: 1em;
color: #fff;
}
.name{
margin-top: 30px;
font-weight: 500;
font-size: 26px;
line-height: 100%;
color: #fff;
}
.more{
width: 118px;
height: 38px;
text-align: center;
border: 1px solid #FFFFFF7D;
border-radius: 66px;
font-weight: 400;
font-size: 14px;
line-height: 38px;
margin-top: 70px;
color: #fff;
}
}
.type-col{
padding: 30px;
border-radius: 20px;
width: 375px;
height: 557px;
background-image: url("@/assets/img/productBg1.png");
.title{
font-weight: 400;
font-size: 16px;
line-height: 100%;
color: #fff;
}
.name{
margin-top: 30px;
font-weight: 500;
font-size: 26px;
line-height: 100%;
color: #fff;
}
.more{
width: 118px;
height: 38px;
text-align: center;
border: 1px solid #FFFFFF7D;
border-radius: 66px;
font-weight: 400;
font-size: 14px;
line-height: 38px;
margin-top: 50px;
margin-bottom: 30px;
color: #fff;
}
.img {
display: flex;
justify-content: center;
}
}
.type-short{
padding: 30px;
border-radius: 20px;
width: 375px;
height: 464px;
background-image: url("@/assets/img/productBg1.png");
.title{
font-weight: 400;
font-size: 16px;
line-height: 100%;
color: #fff;
}
.name{
margin-top: 30px;
font-weight: 500;
font-size: 26px;
line-height: 100%;
color: #fff;
}
.more{
width: 118px;
height: 38px;
text-align: center;
border: 1px solid #FFFFFF7D;
border-radius: 66px;
font-weight: 400;
font-size: 14px;
line-height: 38px;
margin: 50px 0 30px 0;
color: #fff;
}
.img{
display: flex;
justify-content: center;
}
}
.more-produce{
background: #191919;
font-weight: 400;
font-size: 20px;
color: #fff;
width: 367px;
height: 67px;
display: flex;
align-items: center;
justify-content: center;
border:1px solid #DEDEDE;
border-radius: 20px;
}
}
}
</style>

71
src/components/home/Solution.vue
Unescape Escape View File

@ -0,0 +1,71 @@
<script setup>
import {reactive, ref} from "vue";
const cardSwiperItem=reactive([
{
src:'/src/assets/img/工地.png'
},
{
src:'/src/assets/img/企业.png'
},
{
src:'/src/assets/img/政务会议室.png'
},
])
const carouselRef = ref()
let hoverTimer = null
const onCardMouseEnter = (index) => {
// 清除之前的定时器
if (hoverTimer) {
clearTimeout(hoverTimer)
}
// 延迟切换，避免鼠标快速划过时频繁切换
hoverTimer = setTimeout(() => {
if (carouselRef.value) {
carouselRef.value.setActiveItem(index)
}
}, 200) // 200ms 延迟，提升体验
}
</script>
<template>
<div class="solution">
<div class="title">解决方案</div>
<div class="card-swiper">
<el-carousel ref="carouselRef" trigger="click" :interval="4000" type="card" height="524px" :arrow="'never'" :autoplay="true" :pause-on-hover="true" indicator-position="none">
<el-carousel-item v-for="(item,index) in cardSwiperItem" :key="item" @mouseenter="onCardMouseEnter(index)" >
<img :src=item.src alt="">
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<style scoped lang="less">
.solution{
margin: auto ;
padding:109.79px 0;
.title{
text-align: center;
font-size: 40px;
font-weight: 700;
margin-bottom: 80px;
}
.card-swiper{
width: 100%;
height: 524px;
.el-carousel__container{
.el-carousel__item{
height: 524px;
}
}
img{
width: 100%;
height: 100%;
object-fit: fill;
}
}
}
</style>

35
src/components/home/Swiper.vue
Unescape Escape View File

@ -0,0 +1,35 @@
<script setup>
import {reactive} from "vue";
const swiperItem=reactive([
{
src:'/src/assets/image/轮播图2.png'
},
{
src:'/src/assets/image/轮播图2.png'
},
{
src:'/src/assets/image/轮播图2.png'
},
])
</script>
<template>
<div class="block text-center swiper" m="t-4">
<el-carousel trigger="click" height="852px" :arrow="'never'" indicator-position :autoplay="true">
<el-carousel-item v-for="(item,index) in swiperItem" :key="index">
<img :src=item.src :alt=index>
</el-carousel-item>
</el-carousel>
</div>
</template>
<style scoped lang="less">
.swiper{
height:852px;
.el-carousel{
--el-carousel-indicator-height:12.53px;
--el-carousel-indicator-width:203.69px;
}
}
</style>

239
src/components/home/TechnologyCore.vue
Unescape Escape View File

@ -0,0 +1,239 @@
<script setup>
//核心技术
import {onMounted, reactive, ref} from "vue";
const tcSwiperItem=reactive([
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线1',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'飞利信流媒体实时总线',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线2',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'机器人声学感知',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'动态啸叫抑制',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'基于本地网络语音转写、声纹特征识别、会议纪要',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'实时AI降噪',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'多指向性可调',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'快速人声定位及增强',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'流数据实时加解密',
},
])
let hoverTime = null
const tcSwiperRef = ref()
const currentIndex = ref(0)
const showSwiper = (index) => {
// 如果有定时器，先清除
if (hoverTime) {
clearTimeout(hoverTime)
}
// 设置定时器，延迟切换（避免快速划过时频繁切换）
hoverTime = setTimeout(() => {
goToSlide(index)
}, 150) // 150ms 延迟，可以根据需要调整
}
// 跳转到指定幻灯片
const goToSlide = (index) => {
// 确保索引在有效范围内
if (index >= 0 && index < tcSwiperItem.length) {
currentIndex.value = index
// 如果需要直接操作轮播组件（兼容性）
if (tcSwiperRef.value && tcSwiperRef.value.setActiveItem) {
tcSwiperRef.value.setActiveItem(index)
}
}
}
onMounted(() => {
// 可以设置初始显示
goToSlide(0)
})
const tcSwiperChange=(current,perv)=>{
currentIndex.value = current
}
</script>
<template>
<div class="technologyCore">
<el-row>
<el-col :span="9">
<div class="tc-left">
<div class="title">核心技术</div>
<div class="hr"></div>
<div class="text">
深耕二十余载，飞利信积累了从核心硬件设计到智能算法开发的全面深厚功底。我们始终以自主创新的技术为核心驱动力，致力于为每一次关键通讯提供稳定、清晰、卓越的体验保障。
</div>
<div class="tc-left-list">
<div
v-for="(item,index) in tcSwiperItem"
:key="index"
class="tc-left-list-item"
@click="showSwiper(index)"
:class="{ 'active': currentIndex === index }"
>
{{item.label}}
</div>
</div>
</div>
</el-col>
<el-col :offset="3" :span="12">
<div class="tc-right">
<div class="img">
<el-carousel ref="tcSwiperRef" v-model:current-index="currentIndex" class="tc-swiper" indicator-position="outside" height="635px" :autoplay="false" :arrow="'never'" @change="tcSwiperChange">
<el-carousel-item v-for="(item,index) in tcSwiperItem" :key="index">
<img :src=item.src alt="">
<div class="content">
<p class="title">{{ item.label }}</p>
<div class="text">
{{item.text}}
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<style scoped lang="less">
.technologyCore{
padding: 40.31px;
.tc-left{
.title{
font-weight: 700;
font-size: 56px;
line-height: 100%;
padding: 25px 0;
}
.hr{
width: 48.2584228515625px;
height: 6.0625px;
opacity: 1;
background: #80CAFF;
}
.text{
margin-top: 50px;
font-weight: 400;
font-size: 16px;
line-height: 1.5em;
}
.tc-left-list{
display: flex;
gap: 15px;
align-items: end; /* 顶部对齐 */
flex-wrap: wrap;
justify-content: space-between;
margin-top: 140px;
.tc-left-list-item{
display: inline-block;
text-align: center;
flex-grow:1;
cursor: pointer;
opacity: 1;
border-radius: 12px;
padding: 27px 19px;
background-color: #EBEBEB;
font-weight: 400;
font-size: 16px;
line-height: 100%;
color:#888888;
&:hover{
transform: scale(1.05);
}
}
.tc-left-list-item.active {
font-weight: 500;
font-size: 20px;
color: #fff;
background-image: url("@/assets/img/itemBgShort.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 47px 19px;
}
}
}
.tc-right{
.img{
border-radius:8px;
.tc-swiper{
--el-carousel-indicator-width:10.08px;
--el-carousel-indicator-height:10.08px;
--el-carousel-indicator-out-color:#277EFF;
:deep(.el-carousel__button){
border-radius:50%;
}
}
img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
overflow: hidden;
}
}
.content{
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
background-color: #19304D4D;
backdrop-filter: blur(14.399999618530273px);
width: 100%;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
.title{
color: #fff;
font-weight: 700;
font-size: 28px;
line-height: 100%;
}
.text{
font-weight: 400;
font-size: 16px;
color: #fff;
margin-top: 20px;
line-height: 1.5em;
}
}
}
}
</style>

6
src/router/index.js
Unescape Escape View File

@ -1,5 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import HomeView from "@/views/HomeView.vue"; import HomeView from "@/views/HomeView.vue";
import CoreTechnology from "@/views/CoreTechnology.vue";
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
@ -8,6 +9,11 @@ const router = createRouter({
path:'/', path:'/',
name:'home', name:'home',
component:HomeView component:HomeView
},
{
path:'/technology',
name:'technology',
component:CoreTechnology
} }
], ],
}) })

20
src/views/CoreTechnology.vue
Unescape Escape View File

@ -0,0 +1,20 @@
<script setup>
</script>
<template>
<div class="header">
<img src="@/assets/img/tc-top.png" alt="">
</div>
</template>
<style scoped lang="less">
.header{
height: 618px;
img{
width:100%;
height: 100%;
object-fit: cover;
}
}
</style>

330
src/views/HomeView.vue
Unescape Escape View File

@ -1,336 +1,28 @@
<script setup> <script setup>
import {onMounted, reactive, ref} from "vue";
const swiperItem=reactive([ import Dynamic from "@/components/home/Dynamic.vue";
{ import ProductDisplay from "@/components/home/ProductDisplay.vue";
src:'/src/assets/image/轮播图2.png' import TechnologyCore from "@/components/home/TechnologyCore.vue";
}, import Solution from "@/components/home/Solution.vue";
{ import Swiper from "@/components/home/Swiper.vue";
src:'/src/assets/image/轮播图2.png'
},
{
src:'/src/assets/image/轮播图2.png'
},
])
const cardSwiperItem=reactive([
{
src:'/src/assets/img/工地.png'
},
{
src:'/src/assets/img/企业.png'
},
{
src:'/src/assets/img/政务会议室.png'
},
])
const tcSwiperItem=reactive([
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线1',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'飞利信流媒体实时总线',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线2',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'机器人声学感知',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'动态啸叫抑制',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'基于本地网络语音转写、声纹特征识别、会议纪要',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'实时AI降噪',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'多指向性可调',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'快速人声定位及增强',
},
{
src:'/src/assets/img/tc-img1.png',
title:'飞利信流媒体实时总线3',
text:'基于流媒体技术的现场智能会议系统，有效克服了传统以太网通信的不确定性，能够实现全数字化、高带宽的实时传输解决方案。',
label:'流数据实时加解密',
},
])
const carouselRef = ref()
let hoverTimer = null
const onCardMouseEnter = (index) => {
// 清除之前的定时器
if (hoverTimer) {
clearTimeout(hoverTimer)
}
// 延迟切换，避免鼠标快速划过时频繁切换
hoverTimer = setTimeout(() => {
if (carouselRef.value) {
carouselRef.value.setActiveItem(index)
}
}, 200) // 200ms 延迟，提升体验
}
//核心技术
let hoverTime = null
const tcSwiperRef = ref()
const currentIndex = ref(0)
const showSwiper = (index) => {
// 如果有定时器，先清除
if (hoverTime) {
clearTimeout(hoverTime)
}
// 设置定时器，延迟切换（避免快速划过时频繁切换）
hoverTime = setTimeout(() => {
goToSlide(index)
}, 150) // 150ms 延迟，可以根据需要调整
}
// 跳转到指定幻灯片
const goToSlide = (index) => {
// 确保索引在有效范围内
if (index >= 0 && index < tcSwiperItem.length) {
currentIndex.value = index
// 如果需要直接操作轮播组件（兼容性）
if (tcSwiperRef.value && tcSwiperRef.value.setActiveItem) {
tcSwiperRef.value.setActiveItem(index)
}
}
}
onMounted(() => {
// 可以设置初始显示
goToSlide(0)
})
const tcSwiperChange=(current,perv)=>{
currentIndex.value = current
}
</script> </script>
<template> <template>
<div class="block text-center swiper" m="t-4"> <Swiper></Swiper>
<el-carousel trigger="click" height="852px" :arrow="'never'" indicator-position >
<el-carousel-item v-for="(item,index) in swiperItem" :key="index">
<img :src=item.src :alt=index>
</el-carousel-item>
</el-carousel>
</div>
<div class="main"> <div class="main">
<div class="solution"> <Solution/>
<div class="title">解决方案</div> <TechnologyCore/>
<div class="card-swiper"> <ProductDisplay/>
<el-carousel ref="carouselRef" trigger="click" :interval="4000" type="card" height="524px" :arrow="'never'" :autoplay="true" :pause-on-hover="true" indicator-position="none"> <Dynamic/>
<el-carousel-item v-for="(item,index) in cardSwiperItem" :key="item" @mouseenter="onCardMouseEnter(index)" >
<img :src=item.src alt="">
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="technologyCore">
<el-row>
<el-col :span="9">
<div class="tc-left">
<div class="title">核心技术</div>
<div class="hr"></div>
<div class="text">
深耕二十余载，飞利信积累了从核心硬件设计到智能算法开发的全面深厚功底。我们始终以自主创新的技术为核心驱动力，致力于为每一次关键通讯提供稳定、清晰、卓越的体验保障。
</div>
<div class="tc-left-list">
<div
v-for="(item,index) in tcSwiperItem"
:key="index"
class="tc-left-list-item"
@click="showSwiper(index)"
:class="{ 'active': currentIndex === index }"
>
{{item.label}}
</div>
</div>
</div>
</el-col>
<el-col :offset="3" :span="12">
<div class="tc-right">
<div class="img">
<el-carousel ref="tcSwiperRef" v-model:current-index="currentIndex" class="tc-swiper" indicator-position="outside" height="635px" :autoplay="false" :arrow="'never'" @change="tcSwiperChange">
<el-carousel-item v-for="(item,index) in tcSwiperItem" :key="index">
<img :src=item.src alt="">
<div class="content">
<p class="title">{{ item.label }}</p>
<div class="text">
{{item.text}}
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</el-col>
</el-row>
</div>
</div> </div>
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.swiper{
height:852px;
.el-carousel{
--el-carousel-indicator-height:12.53px;
--el-carousel-indicator-width:203.69px;
}
}
.main{ .main{
width: 1585px; width: 1585px;
margin: auto; margin: auto;
.solution{
margin: auto ;
padding:109.79px 0;
.title{
text-align: center;
font-size: 40px;
font-weight: 700;
margin-bottom: 80px;
}
.card-swiper{
width: 100%;
height: 524px;
.el-carousel__container{
.el-carousel__item{
height: 524px;
}
}
img{
width: 100%;
height: 100%;
object-fit: fill;
}
}
}
.technologyCore{
padding: 40.31px;
.tc-left{
.title{
font-weight: 700;
font-size: 56px;
line-height: 100%;
padding: 25px 0;
}
.hr{
width: 48.2584228515625px;
height: 6.0625px;
opacity: 1;
background: #80CAFF;
}
.text{
margin-top: 50px;
font-weight: 400;
font-size: 16px;
line-height: 1.5em;
}
.tc-left-list{
display: flex;
gap: 15px;
align-items: end; /* 顶部对齐 */
flex-wrap: wrap;
justify-content: space-between;
margin-top: 140px;
.tc-left-list-item{
display: inline-block;
text-align: center;
flex-grow:1;
//flex-shrink: 0;
opacity: 1;
border-radius: 12px;
padding: 27px 19px;
background-color: #EBEBEB;
font-weight: 400;
font-size: 16px;
line-height: 100%;
color:#888888;
}
.tc-left-list-item.active {
font-weight: 500;
//font-size: 20px;
color: #fff;
background-image: url("@/assets/img/itemBgShort.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 47px 19px;
}
}
}
.tc-right{
.img{
border-radius:8px;
.tc-swiper{
--el-carousel-indicator-width:10.08px;
--el-carousel-indicator-height:10.08px;
--el-carousel-indicator-out-color:#277EFF;
:deep(.el-carousel__button){
border-radius:50%;
}
}
img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
overflow: hidden;
}
}
.content{
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
background-color: #19304D4D;
backdrop-filter: blur(14.399999618530273px);
width: 100%;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
.title{
font-family: Source Han Sans CN;
color: #fff;
font-weight: 700;
font-size: 28px;
line-height: 100%;
}
.text{
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 16px;
color: #fff;
margin-top: 20px;
line-height: 1.5em;
}
}
}
}
} }
</style> </style>

Write Preview
Loading…
Cancel
Save