ct/app/components/yuxi/Solutions.vue

<template>
  <div class="container-fluid text-center mainitems">
    <div class="headtit">物联网解决方案</div>
    <div class="minstit">针对不同类型使用场景需求，量身定制解决方案</div>
    <div class="row inteBody">
      <div 
        v-for="(solution, index) in solutions" 
        :key="index"
        class="col-xs-12 col-lg-2"
        :class="{ 'col-lg-offset-1': index === 0 }"
      >
        <div class="intebody-info">
          <a href="#" @click.prevent="goToDetail(solution.link)">
            <img :src="solution.image" :alt="solution.title">
          </a>
          <h2>{{ solution.title }}</h2>
          <p>{{ solution.shortDescription }}</p>
        </div>

        <div class="intebody-hover">
          <h2>{{ solution.title }}</h2>
          <p>{{ solution.fullDescription }}</p>
          <a :href="solution.link" @click.prevent="goToDetail(solution.link)">查看详情</a>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

// 解决方案数据
const solutions = [
  {
    title: '共享陪护床',
    image: '/www.yuxiit.com/img/yuxiupdata/banner3-1.png',
    shortDescription: '解决医院陪护家属未配有床位，休息不便的问题…',
    fullDescription: '解决医院陪护家属未配有床位，休息不便的问题，提高供给效率，满足患者及家属的需要，协助医院有效管理的同事，给患者家属更舒适的修养环境。',
    link: '/yuxi/sharedbed'
  },
  {
    title: '共享单车',
    image: '/www.yuxiit.com/img/yuxiupdata/banner3-2.png',
    shortDescription: '解决大型园区或短距离出行麻烦，提高出行效率…',
    fullDescription: '解决大型园区或短距离出行麻烦，提高出行效率，分时租赁单车，无桩共享，是一种新型的经济环保出行方式。',
    link: 'http://bike.yuxiit.com/'
  },
  {
    title: '共享电单车',
    image: '/www.yuxiit.com/img/yuxiupdata/banner3-3.png',
    shortDescription: '解决人们最后三公里的出行，促进环保和健康出行...',
    fullDescription: '解决人们最后三公里的出行，促进环保和健康出行，电动助力，省力高效。',
    link: '/yuxi/Ebike'
  },
  {
    title: '共享电动车',
    image: '/www.yuxiit.com/img/yuxiupdata/banner3-4.png',
    shortDescription: '电动车相比续航能力更强，适用于各种出行场…',
    fullDescription: '电动车相比续航能力更强，适用于各种出行场景，一站式提供硬件设备与软件开发',
    link: '/yuxi/Ebike'
  },
  {
    title: '共享滑板车',
    image: '/www.yuxiit.com/img/yuxiupdata/banner3-5.png',
    shortDescription: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符求…',
    fullDescription: '滑板车相对更加轻便，可穿梭于狭窄街巷，更符合用户的短距离出行需求。',
    link: '/yuxi/scooter'
  }
]

// 方法
const goToDetail = (link: string) => {
  if (link.startsWith('http')) {
    window.open(link, '_blank')
  } else {
    navigateTo(link)
  }
}

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

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

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

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

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

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

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

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

.intebody-info img {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  object-fit: contain;
}

.intebody-info h2 {
  font-size: 1.5em;
  color: #333;
  margin-bottom: 15px;
  font-weight: bold;
}

.intebody-info p {
  color: #666;
  font-size: 0.9em;
  line-height: 1.5;
  text-align: center;
}

.intebody-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  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;
}

.intebody-info:hover .intebody-hover {
  opacity: 1;
}

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

.intebody-hover p {
  font-size: 0.9em;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 20px;
}

.intebody-hover a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border: 2px solid #fff;
  border-radius: 25px;
  transition: all 0.3s ease;
  font-weight: bold;
}

.intebody-hover a:hover {
  background: #fff;
  color: #667eea;
}

@media (max-width: 1200px) {
  .inteBody {
    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;
  }
  
  .intebody-info {
    height: 250px;
  }
}
</style>