125 lines
3.7 KiB
Vue
125 lines
3.7 KiB
Vue
<template>
|
|
<div id='mobileHealth'>
|
|
<div class='ui-mobile-health'>
|
|
<div class='ui-mobile-health-title'>{{ t('message.Health.title1') }}</div>
|
|
<div class='ui-mobile-health-subtitle'>{{topSubtitle}}</div>
|
|
<div class='ui-mobile-health-title'>{{ t('message.Health.title4') }}</div>
|
|
<div class='ui-mobile-health-subtitle'>{{centerSubtitle}}</div>
|
|
<div class=' ui-mobile-health-nextTitle'>{{ t('message.Health.html2') }}</div>
|
|
<div class='ui-mobile-health-list' v-for='(item,index) in list' :key='index'>
|
|
<div class='ui-m-h-l-title'>{{item.name}}</div>
|
|
<div class='ui-m-h-l-pic'>
|
|
<img :src='item.icon' alt=''>
|
|
<div class='ui-m-h-l-subtitle'>{{item.subtitle}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import { computed, onMounted } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
const { t,locale } = useI18n()
|
|
|
|
const topSubtitle =computed(() => {
|
|
return t('message.Health.titleM1')+'\n' +
|
|
t('message.Health.titleM2')+'\n' +
|
|
t('message.Health.titleM3')+'\n' +
|
|
t('message.Health.titleM4')+'\n' +
|
|
t('message.Health.titleM5')+'\n' +
|
|
t('message.Health.titleM6')
|
|
})
|
|
|
|
const centerSubtitle = computed(() => {
|
|
return t('message.Health.title5M1')+'\n' +
|
|
t('message.Health.title5M2')+'\n' +
|
|
t('message.Health.title5M3')+'\n' +
|
|
t('message.Health.title5M4')+'\n' +
|
|
t('message.Health.title5M5')+'\n' +
|
|
t('message.Health.title5M6')+'\n'
|
|
})
|
|
|
|
const list =computed(() => {
|
|
return [
|
|
{name: '01.'+ t('message.Health.list1'),subtitle:t('message.Health.list2'),icon:'https://image.fulllinkai.com/202309/18/0b9407007c0dda9419dcc3b02b2283c7.png'},
|
|
{name: '02.'+ t('message.Health.list3'),subtitle:t('message.Health.list4'),icon:'https://image.fulllinkai.com/202309/18/2e1d657778a833ee25528b26004d1aa7.png'},
|
|
{name: '03.'+ t('message.Health.list5'),subtitle:t('message.Health.list6'),icon:'https://image.fulllinkai.com/202309/18/b49154cfa009ceda5bdf2f038cdeaba4.png'},
|
|
{name: '04.'+ t('message.Health.list7'),subtitle:t('message.Health.list8'),icon:'https://image.fulllinkai.com/202309/18/37e3a27e03f62a3173db4326a5b021c8.png'},
|
|
{name: '05.'+ t('message.Health.list9'),subtitle:t('message.Health.list10'),icon:'https://image.fulllinkai.com/202309/18/a37b26a88619d2b2463e8856de1fdba6.png'},
|
|
]
|
|
})
|
|
onMounted(() => {
|
|
sessionStorage.setItem('navIndex', '1')
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
#mobileHealth{
|
|
width: 100%;
|
|
background: url("https://image.fulllinkai.com/202309/18/11f991ca4d1b3d5b0d8c443c5b66c2a9.png") no-repeat center;
|
|
background-size: cover;
|
|
padding-bottom: 96px;
|
|
}
|
|
.ui-mobile-health{
|
|
padding: 140px 24px 0;
|
|
text-align: center;
|
|
}
|
|
.ui-mobile-health-title{
|
|
margin-bottom: 24px;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
color: #375FFF;
|
|
}
|
|
.ui-mobile-health-subtitle{
|
|
margin-bottom: 96px;
|
|
font-size: 14px;
|
|
font-weight: 350;
|
|
color: #0A112E;
|
|
line-height: 28px;
|
|
white-space: pre-wrap;
|
|
}
|
|
.ui-mobile-health-nextTitle{
|
|
margin-bottom: 24px;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
color: #375FFF;
|
|
}
|
|
.ui-mobile-health-list{
|
|
margin-bottom: 24px;
|
|
}
|
|
.ui-mobile-health-list:nth-last-child(1){
|
|
margin-bottom: 0;
|
|
}
|
|
.ui-m-h-l-title{
|
|
margin-bottom: 8px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #8DA4FF;
|
|
}
|
|
.ui-m-h-l-pic{
|
|
/*margin-bottom: 24px;*/
|
|
position: relative;
|
|
width: 328px;
|
|
height: 132px;
|
|
}
|
|
/*.ui-m-h-l-pic:nth-last-child(1){*/
|
|
/* margin-bottom: 0;*/
|
|
/*}*/
|
|
.ui-m-h-l-pic img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.ui-m-h-l-pic div {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
left: 8px;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
font-weight: 350;
|
|
color: #FFFFFF;
|
|
}
|
|
</style>
|