forked from dengzhifeng/ufutx-pc-website
126 lines
2.7 KiB
Vue
126 lines
2.7 KiB
Vue
<template>
|
|
<section class="health-device">
|
|
<div class="device-content">
|
|
<div class="device-img">
|
|
<img :src="device.img" alt="设备界面" />
|
|
</div>
|
|
<div class="device-info">
|
|
<h3 class="device-title">{{ device.title }}</h3>
|
|
<h3 class="device-subtitle">AI精准个性化健康方案服务</h3>
|
|
<p class="device-desc" v-html="device.desc"></p>
|
|
<div class="download-btn">立即下载</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ElButton } from 'element-plus'
|
|
// import FeatureNav from '@/views/App/sections/FeatureNav.vue'
|
|
|
|
const props = defineProps({
|
|
device: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({
|
|
title: '健康手环',
|
|
desc: 'AI精准个性化健康方案服务',
|
|
img: 'https://images.health.ufutx.com/202506/18/2e9c9d64bdcf03fbe5041720f03033ca.png'
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '@/styles/global.less';
|
|
|
|
.health-device {
|
|
padding: 50px 192px 80px 192px;
|
|
background: #fff;
|
|
|
|
.section-divider {
|
|
text-align: center;
|
|
font-size: 50px;
|
|
color: @text-color;
|
|
font-weight: bold;
|
|
}
|
|
.device-content {
|
|
display: flex;
|
|
align-items: center;
|
|
//justify-content: space-between;
|
|
gap: 132px;
|
|
|
|
.device-img {
|
|
//flex: 1;
|
|
//text-align: center;
|
|
width: 900px;
|
|
height: 716px;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
img {
|
|
width: 100%;
|
|
background: #f6fffa;
|
|
}
|
|
}
|
|
|
|
.device-info {
|
|
flex: 1;
|
|
text-align: left;
|
|
|
|
.device-title {
|
|
color: #18ca6e;
|
|
font-size: 36px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
.device-subtitle {
|
|
color: #0e0e0e;
|
|
font-size: 36px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
.device-desc {
|
|
color: var(--66676-c, #66676c);
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 36px; /* 180% */
|
|
text-transform: capitalize;
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: @tablet-breakpoint) {
|
|
flex-direction: column;
|
|
padding: 40px 20px;
|
|
|
|
.device-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
|
|
.device-info {
|
|
.device-desc {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|