You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.0 KiB
76 lines
2.0 KiB
<script setup>
|
|
import { ref, onMounted, inject } from 'vue';
|
|
import { Post } from '@/utils/https'
|
|
const store = inject('appStore')
|
|
|
|
const emit = defineEmits(['ready'])
|
|
const welcomeWord = ref('')
|
|
const welcomeSubWord = ref('我是您的服务管家皮卡丘')
|
|
onMounted(() => {
|
|
Post('welcome/speech', {
|
|
source: store.source,
|
|
userInfoId: store.userId
|
|
}).then(res => {
|
|
if (res.code === 0 && res.data) {
|
|
welcomeWord.value = `${res.data?.greetings || ''}${res.data?.welcomeName ? '，' : ''}${res.data?.welcomeName || ''}`
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error)
|
|
}).finally(() => {
|
|
emit('ready')
|
|
})
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="welcome-con">
|
|
<div class="welcome-title">{{ welcomeWord }}</div>
|
|
<div class="sub-title">{{ welcomeSubWord }}</div>
|
|
<img src="@/assets/images/chat/chat-avator.png" alt="" srcset="" v-show="welcomeSubWord" />
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.welcome-con {
|
|
padding: 38rem 8rem;
|
|
position: relative;
|
|
.welcome-title {
|
|
font-family: PingFang SC;
|
|
max-width: calc(100% - 100rem);
|
|
font-size: 20rem;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
letter-spacing: 0em;
|
|
|
|
font-variation-settings: 'opsz' auto;
|
|
background: linear-gradient(266deg, #001a9c -18%, #0f194c 82%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.sub-title {
|
|
max-width: calc(100% - 100rem);
|
|
font-family: PingFang SC;
|
|
font-size: 18rem;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
letter-spacing: 0em;
|
|
display: inline-block;
|
|
font-variation-settings: 'opsz' auto;
|
|
background: linear-gradient(240deg, #176cff 8%, #0f194c 31%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
width: fit-content;
|
|
text-fill-color: transparent;
|
|
}
|
|
|
|
img {
|
|
position: absolute;
|
|
right: -16rem;
|
|
top: -3rem;
|
|
width: 180rem;
|
|
}
|
|
}
|
|
</style> |