162 lines
4.0 KiB
Vue
162 lines
4.0 KiB
Vue
<template>
|
|
<section class="banner">
|
|
<div v-motion-fade-visible class="banner-bg">
|
|
<!-- 替换为实际背景图路径 -->
|
|
<img src="https://images.health.ufutx.com/202509/26/9986d47439b87108c3cbb01ddf2a853d.jpeg" alt="Banner背景" />
|
|
</div>
|
|
<div class="news-panel">
|
|
<div
|
|
v-for="(item, index) in newsList"
|
|
:key="index"
|
|
class="news-item"
|
|
:class="{ active: activeIndex === index }"
|
|
@mouseenter="activeIndex = index"
|
|
@mouseleave="activeIndex = null"
|
|
>
|
|
<div class="icon">
|
|
<img :src="activeIndex === index ? item.hoverIcon : item.icon" />
|
|
</div>
|
|
<span class="text">{{ item.title }}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// import { ref } from 'vue'
|
|
|
|
const activeIndex = ref<number | null>(null)
|
|
//
|
|
const newsList = [
|
|
{
|
|
title: '新闻！热门健康方案服务',
|
|
icon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png',
|
|
hoverIcon: 'https://images.health.ufutx.com/202506/13/2acac19e00b1621a7fc2143323deafd7.png'
|
|
},
|
|
{
|
|
title: '新闻专访！健康方案',
|
|
icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
|
hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
|
},
|
|
{
|
|
title: '新闻！健康方案专访频道',
|
|
icon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png',
|
|
hoverIcon: 'https://images.health.ufutx.com/202506/13/00b620ad60ad988755f8609422a3b13a.png'
|
|
},
|
|
{
|
|
title: '专访新闻！健康方案',
|
|
icon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png',
|
|
hoverIcon: 'https://images.health.ufutx.com/202506/13/27550d3aa8786ca56a1b73f64967d45d.png'
|
|
},
|
|
{
|
|
title: '新闻！健康方案专访频道',
|
|
icon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png',
|
|
hoverIcon: 'https://images.health.ufutx.com/202506/13/11ccc759cfe3bbbc27ff9bcd34f074d0.png'
|
|
}
|
|
]
|
|
// 暂无逻辑，纯展示
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.banner {
|
|
//width: 100%;
|
|
position: relative;
|
|
text-align: center;
|
|
color: #fff;
|
|
|
|
.banner-bg {
|
|
width: 100%;
|
|
height: 830px;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.news-panel {
|
|
position: absolute;
|
|
top: 230px;
|
|
right: 169px;
|
|
padding: 20px 20px 0 20px;
|
|
width: 330px;
|
|
height: 384px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
border-radius: 10px;
|
|
background: rgba(51, 51, 51, 0.3);
|
|
backdrop-filter: blur(10px);
|
|
.news-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px;
|
|
border-radius: @border-radius-md;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
cursor: pointer;
|
|
margin-bottom: 12px;
|
|
&:hover,
|
|
&.active {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translateX(6px);
|
|
}
|
|
|
|
.icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-right: 15px;
|
|
transition: transform 0.3s ease;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
font-size: @font-size-md;
|
|
color: #ffffff;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
&:hover .text,
|
|
&.active .text {
|
|
color: @text-color;
|
|
}
|
|
|
|
&:hover .icon,
|
|
&.active .icon {
|
|
background-image: linear-gradient(to bottom, #6280d0, #4bbce9);
|
|
transform: scale(1.15); // 图标轻微放大
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 响应式适配
|
|
@media (max-width: 768px) {
|
|
.banner {
|
|
height: auto !important;
|
|
}
|
|
.banner-content {
|
|
.main-title {
|
|
font-size: 32px;
|
|
}
|
|
.sub-title {
|
|
font-size: 18px;
|
|
}
|
|
.action-btn {
|
|
font-size: 16px;
|
|
padding: 10px 24px;
|
|
}
|
|
}
|
|
.news-panel {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|