admin-vue3/src/components/Im/Welcome/src/Welcome.vue

74 lines
1.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<script setup lang="ts">
import tang from '@/assets/imgs/im/welcome/Group 78@3x.png'
import maskGroup from '@/assets/imgs/im/welcome/Mask_group2.png'
</script>
<template>
<div class="app_contanier">
<div class="welcome_box">
<img class="tang" :src="tang" alt="" />
<h1 class="welcome_box_title">欢迎体验 芋道 即时通讯</h1>
<p class="welcome_box_text"
>包含单聊群聊添加好友创建群组等功能更多其他功能等你发现快去试试吧
</p>
</div>
<img class="maskGroup" :src="maskGroup" alt="" />
</div>
</template>
<style scoped>
.app_contanier {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
background-size: 100% 100%;
border-radius: 0 5px 5px 0;
overflow: hidden;
}
.welcome_box {
position: relative;
margin-top: 140px;
margin-left: 100px;
width: 637px;
height: 400px;
}
.tang {
position: absolute;
left: -30px;
top: 0;
width: 32px;
height: 32px;
}
.welcome_box_title {
font-family: 'PingFang SC', serif;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 34px;
letter-spacing: 1px;
color: #333333;
}
.welcome_box_text {
margin-top: 12px;
font-family: 'PingFang SC', serif;
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 22px;
letter-spacing: 1.5px;
color: #a3a3a3;
}
.maskGroup {
position: absolute;
right: 0;
top: 25%;
}
</style>