109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
||
<section class="speech-module">
|
||
<div class="speech-content">
|
||
<div class="speech-info">
|
||
<h3 class="speech-title">1分钟演讲</h3>
|
||
<p class="speech-subtitle">每日演讲练习 开场不再词穷</p>
|
||
<p class="speech-desc">
|
||
跨出社交圈，“一分钟演讲”<br />
|
||
立即让未来的灵魂伴侣更了解你，轻松打开话题
|
||
</p>
|
||
<div class="download-btn" @click="openReport">立即下载</div>
|
||
</div>
|
||
<div class="speech-img">
|
||
<!-- <img src="@/assets/speech-app.png" alt="演讲界面" />-->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { openExternalLink } from '@/utils/navigation.ts'
|
||
// 外部链接跳转（新标签）
|
||
const openReport = () => {
|
||
openExternalLink('https://sj.qq.com/appdetail/com.ufutx.lovehealth', '_blank')
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '@/styles/global.less';
|
||
|
||
.speech-module {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0px 192px;
|
||
height: 1003px;
|
||
background-image: url('https://images.health.ufutx.com/202506/18/84b3dbef5488efa0b793acb28d2a732f.png');
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
|
||
.speech-content {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 444px;
|
||
//background: red;
|
||
.speech-info {
|
||
//flex: 1;
|
||
text-align: left;
|
||
.speech-title {
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
color: @text-color-primary;
|
||
}
|
||
|
||
.speech-subtitle {
|
||
font-size: 36px;
|
||
color: @text-color;
|
||
.mt(10px);
|
||
}
|
||
|
||
.speech-desc {
|
||
font-size: 20px;
|
||
color: @text-color-secondary;
|
||
line-height: 36px;
|
||
.my(30px);
|
||
}
|
||
|
||
.download-btn {
|
||
display: inline-block;
|
||
padding: 16px 30px;
|
||
align-items: center;
|
||
gap: 20px;
|
||
border-radius: 100px;
|
||
border: 1px solid var(--18-ca-6-e, #18ca6e);
|
||
background: #18ca6e;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.speech-img {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
img {
|
||
width: 80%;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: @tablet-breakpoint) {
|
||
flex-direction: column;
|
||
padding: 40px 20px;
|
||
|
||
.speech-content {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
|
||
.speech-info {
|
||
.speech-desc {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|