首页核心技术功能

src/assets/base.css

@@ -98,3 +98,4 @@ a{
 a:hover{
   color:#66b1ff
 }
+

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {reactive} from "vue";
+import {onMounted, reactive, ref} from "vue";
 
 const swiperItem=reactive([
   {
@@ -12,6 +12,119 @@ const swiperItem=reactive([
     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>
 
 <template>
@@ -22,6 +135,60 @@ const swiperItem=reactive([
       </el-carousel-item>
     </el-carousel>
   </div>
+  <div class="main">
+    <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>
+    <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>
 </template>
 <style scoped lang="less">
 .swiper{
@@ -31,23 +198,139 @@ const swiperItem=reactive([
     --el-carousel-indicator-width:203.69px;
   }
 }
-.demonstration {
-  color: var(--el-text-color-secondary);
-}
+.main{
+  width: 1585px;
+  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;
 
-.el-carousel__item h3 {
-  color: #475669;
-  opacity: 0.75;
-  line-height: 852px;
-  margin: 0;
-  text-align: center;
-}
+        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;
+        }
+      }
 
-.el-carousel__item:nth-child(2n) {
-  background-color: #99a9bf;
+    }
+    .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;
+        }
+      }
+    }
+  }
 }
 
-.el-carousel__item:nth-child(2n + 1) {
-  background-color: #d3dce6;
-}
+
+
+
 </style>