124 lines
3.0 KiB
Vue
124 lines
3.0 KiB
Vue
<template>
|
|
<section class="partner-section">
|
|
<div class="partner-header">
|
|
<h2 class="partner-title">合作伙伴</h2>
|
|
<p class="partner-subtitle">正与众多客户一起创造更多价值</p>
|
|
</div>
|
|
<div class="partner-logos">
|
|
<div v-for="index in 21" :key="index" class="partner-logo-item">
|
|
<!-- <img :src="logo.src" :alt="logo.alt" class="partner-logo" />-->
|
|
<img
|
|
src="https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png"
|
|
alt="新浪健康"
|
|
class="partner-logo"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 使用提供的图片链接作为所有合作伙伴Logo
|
|
// const partnerLogos = [
|
|
// {
|
|
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
|
// alt: '新浪健康'
|
|
// },
|
|
// {
|
|
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
|
// alt: '新浪健康'
|
|
// },
|
|
// {
|
|
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
|
// alt: '新浪健康'
|
|
// },
|
|
// {
|
|
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
|
// alt: '新浪健康'
|
|
// },
|
|
// {
|
|
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
|
// alt: '新浪健康'
|
|
// },
|
|
// {
|
|
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
|
// alt: '新浪健康'
|
|
// },
|
|
// {
|
|
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
|
// alt: '新浪健康'
|
|
// },
|
|
// {
|
|
// src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
|
|
// alt: '新浪健康'
|
|
// }
|
|
// ]
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '@/styles/global.less';
|
|
|
|
.partner-section {
|
|
width: 100%;
|
|
text-align: center;
|
|
|
|
.partner-header {
|
|
.my(50px);
|
|
.partner-title {
|
|
font-size: @font-size-xxl;
|
|
font-weight: @font-weight-bold;
|
|
color: @text-color;
|
|
margin-bottom: @space-sm;
|
|
}
|
|
|
|
.partner-subtitle {
|
|
font-size: 20px;
|
|
color: @text-color-secondary;
|
|
.mt(20px);
|
|
}
|
|
}
|
|
|
|
.partner-logos {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: @space-xl;
|
|
justify-items: center;
|
|
.px(160px);
|
|
.pb(50px);
|
|
.partner-logo-item {
|
|
width: 100%;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.partner-logo {
|
|
width: 230px;
|
|
//max-height: 60px;
|
|
object-fit: contain;
|
|
transition: transform 0.3s ease;
|
|
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 响应式适配
|
|
@media (max-width: @tablet-breakpoint) {
|
|
.partner-logos {
|
|
gap: @space-md;
|
|
|
|
.partner-logo-item {
|
|
height: 60px;
|
|
}
|
|
|
|
.partner-logo {
|
|
max-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|