ct/app/components/yuxi/Applications.vue

<template>
  <div class="container-fluid text-center mainitems" style="background: #FAFAFA;">
    <div class="headtit">多场景应用</div>
    <div class="minstit">通过专业的智能硬件与软件系统开发，解决物联网平台在各类复杂场景下的应用问题</div>
    <div class="row bodycnt">
      <div 
        v-for="(application, index) in applications" 
        :key="index"
        class="col-xs-12 col-lg-2"
        :class="{ 'col-lg-offset-2': index === 0 }"
        @mouseenter="setHovered(index)"
        @mouseleave="clearHovered"
      >
        <div 
          class="bodycnt-info"
          :class="`bodycnt-info${index + 1}`"
        >
          <img :src="application.image" :alt="application.title">
          <span></span>{{ application.title }}
        </div>

        <div class="bodycnt-datails" :class="{ 'show': hoveredIndex === index }">
          <h2>{{ application.title }}</h2>
          <span></span>
          <p v-html="application.description"></p>
        </div>
      </div>
    </div>
    <div class="m-btns">
      <a href="/yuxi/Intelhardware">了解更多</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 响应式数据
const hoveredIndex = ref(-1)

// 应用场景数据
const applications = [
  {
    title: '智能家居',
    image: '/www.yuxiit.com/img/yuxiupdata/banner2-1.png',
    description: '智能门锁<br> 智能空调<br> 智能电饭煲<br> 智能窗帘<br> …'
  },
  {
    title: '智慧出行',
    image: '/www.yuxiit.com/img/yuxiupdata/banner2-2.png',
    description: '共享单车<br> 共享汽车<br> 共享滑板车<br> 共享电动车<br> …'
  },
  {
    title: '智慧医疗',
    image: '/www.yuxiit.com/img/yuxiupdata/banner2-3.png',
    description: '共享陪护床<br> 智能安防<br> 共享打印机<br> 共享充电宝<br> …'
  },
  {
    title: '智慧园区',
    image: '/www.yuxiit.com/img/yuxiupdata/banner2-4.png',
    description: '智能自提柜<br> 共享健身房<br> 共享洗衣机<br> 智能门禁<br> …'
  }
]

// 方法
const setHovered = (index: number) => {
  hoveredIndex.value = index
}

const clearHovered = () => {
  hoveredIndex.value = -1
}
</script>

<style scoped>
.mainitems {
  padding: 60px 0;
  background: #FAFAFA;
}

.headtit {
  font-size: 2.5em;
  color: #333;
  margin-bottom: 20px;
  font-weight: bold;
}

.minstit {
  font-size: 1.2em;
  color: #666;
  margin-bottom: 50px;
}

.bodycnt {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.bodycnt-info {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 40px 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.bodycnt-info:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.bodycnt-info img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  object-fit: contain;
}

.bodycnt-info span {
  font-size: 1.2em;
  color: #333;
  font-weight: bold;
}

/* 不同应用场景的背景色 */
.bodycnt-info1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.bodycnt-info2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: #fff;
}

.bodycnt-info3 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #fff;
}

.bodycnt-info4 {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: #fff;
}

.bodycnt-datails {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  color: #fff;
  border-radius: 8px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.bodycnt-datails.show {
  opacity: 1;
}

.bodycnt-datails h2 {
  font-size: 1.5em;
  margin-bottom: 15px;
  font-weight: bold;
}

.bodycnt-datails span {
  width: 50px;
  height: 2px;
  background: #fff;
  margin-bottom: 20px;
}

.bodycnt-datails p {
  font-size: 0.9em;
  line-height: 1.8;
  text-align: center;
}

.m-btns {
  margin-top: 50px;
  text-align: center;
}

.m-btns a {
  display: inline-block;
  padding: 15px 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.m-btns a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

@media (max-width: 1200px) {
  .bodycnt {
    justify-content: space-around;
  }
  
  .col-lg-2 {
    flex: 0 0 30%;
    max-width: 30%;
  }
}

@media (max-width: 768px) {
  .headtit {
    font-size: 2em;
  }
  
  .minstit {
    font-size: 1em;
  }
  
  .col-lg-2 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
  
  .bodycnt-info {
    height: 180px;
  }
}
</style>