forked from dengzhifeng/ufutx-pc-website
96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
<template>
|
||
<section class="success-stories">
|
||
<h2 class="section-title">就在你身边，他们相爱啦！</h2>
|
||
<p class="section-subtitle">Right Beside You, They Love Each Other!</p>
|
||
<div class="download-btn btn-glow">立即下载</div>
|
||
<div class="stories-icon">
|
||
<img src="https://images.health.ufutx.com/202506/18/1a837037ce7fb8502a211a01e19fbf55.png" alt="" />
|
||
</div>
|
||
<!-- <div class="stories-grid">-->
|
||
<!-- <div class="story-item" v-for="(item, i) in stories" :key="i">-->
|
||
<!-- <img :src="item.img" alt="成功故事" class="story-img" />-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// // 18 import { ElButton } from 'element-plus'
|
||
|
||
// const stories = [
|
||
// { img: '@/assets/story-1.jpg' },
|
||
// { img: '@/assets/story-2.jpg' },
|
||
// { img: '@/assets/story-3.jpg' },
|
||
// { img: '@/assets/story-4.jpg' },
|
||
// { img: '@/assets/story-5.jpg' },
|
||
// { img: '@/assets/story-6.jpg' }
|
||
// ]
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '@/styles/global.less';
|
||
|
||
.success-stories {
|
||
padding: 100px 192px;
|
||
text-align: center;
|
||
|
||
.section-title {
|
||
font-size: 50px;
|
||
font-weight: bold;
|
||
color: @text-color;
|
||
margin-bottom: 17px;
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 60px;
|
||
color: #b5b5b5;
|
||
margin-bottom: 17px;
|
||
}
|
||
|
||
.download-btn {
|
||
display: inline-block;
|
||
padding: 16px 30px;
|
||
border-radius: 100px;
|
||
background: var(--Style, #1060ff);
|
||
color: var(--ffffff, #fff);
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.stories-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
|
||
.story-item {
|
||
width: 160px;
|
||
height: 160px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||
|
||
.story-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: @tablet-breakpoint) {
|
||
.stories-grid {
|
||
gap: 10px;
|
||
|
||
.story-item {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|