133 lines
3.4 KiB
Vue
133 lines
3.4 KiB
Vue
<template>
|
|
<svg
|
|
id="messenger"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<defs>
|
|
<linearGradient
|
|
id="linear-gradient"
|
|
x1="0.5"
|
|
y1="-1.438"
|
|
x2="0.5"
|
|
y2="0.633"
|
|
gradientUnits="objectBoundingBox"
|
|
>
|
|
<stop offset="0" stop-color="#fff33b" stop-opacity="0" />
|
|
<stop offset="0.152" stop-color="#ffde46" stop-opacity="0.141" />
|
|
<stop offset="0.467" stop-color="#ffa764" stop-opacity="0.435" />
|
|
<stop offset="0.581" stop-color="#ff916f" stop-opacity="0.541" />
|
|
<stop offset="1" stop-color="#ff5782" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="linear-gradient-2"
|
|
x1="0.498"
|
|
y1="0.728"
|
|
x2="0.498"
|
|
y2="-0.433"
|
|
gradientUnits="objectBoundingBox"
|
|
>
|
|
<stop offset="0" stop-color="#f7cf83" />
|
|
<stop offset="1" stop-color="#fff" />
|
|
</linearGradient>
|
|
<rect id="rect" width="29" height="29" rx="10" />
|
|
<clipPath id="clip">
|
|
<use xlink:href="#rect" />
|
|
</clipPath>
|
|
</defs>
|
|
<!-- <g id="cardsDiv"> -->
|
|
<!-- <g
|
|
v-for="(item, index) in renderArr"
|
|
:key="index"
|
|
id="cards"
|
|
transform="translate(0, 0)"
|
|
>
|
|
<transition
|
|
appear
|
|
v-on:before-appear="beforeEnter"
|
|
v-on:appear="enter"
|
|
v-on:appear-cancelled="leave"
|
|
>
|
|
<MessageItem
|
|
:v-if="item"
|
|
:item="item"
|
|
:key="index"
|
|
/>
|
|
</transition>
|
|
</g> -->
|
|
<!-- </g> -->
|
|
<g id="titlebar" transform="translate(0, 0)">
|
|
<g data-name="Group 73" transform="translate(20 20)">
|
|
<ellipse
|
|
id="Oval"
|
|
cx="8.134"
|
|
cy="8.134"
|
|
rx="8.134"
|
|
ry="8.134"
|
|
transform="translate(0 0)"
|
|
fill="url(#linear-gradient)"
|
|
/>
|
|
<ellipse
|
|
id="Oval-2"
|
|
data-name="Oval"
|
|
cx="8.134"
|
|
cy="8.134"
|
|
rx="8.134"
|
|
ry="8.134"
|
|
transform="translate(27 0)"
|
|
fill="url(#linear-gradient-2)"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, inject, ref, onMounted } from "vue";
|
|
// import MessageItem from './UIDetails/messageItem.vue';
|
|
import Messages from "./UIDetails/messages";
|
|
export default defineComponent({
|
|
name: 'UIindex',
|
|
// components: { MessageItem },
|
|
setup() {
|
|
|
|
const anime: object | any = inject('animejs');
|
|
const timeline: typeof anime = anime.timeline({ loop: true });
|
|
const renderArr: Message[] = [];
|
|
const messages = Messages;
|
|
const messageOffset = {
|
|
x: null,
|
|
y: null
|
|
}
|
|
const renderMsg = (i: number) => {
|
|
setTimeout(() => {
|
|
renderArr.push(messages[i]);
|
|
}, 2000);
|
|
}
|
|
const runAnim = () => {
|
|
for (let i = 0; i < messages.length; i++) {
|
|
renderMsg(i);
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
runAnim();
|
|
});
|
|
return {
|
|
// timeline,
|
|
renderArr,
|
|
messageOffset
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#messenger {
|
|
width: 350px;
|
|
height: 500px;
|
|
background-color: #E6E6E6;
|
|
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
|
|
border-radius: 20px;
|
|
}
|
|
</style>
|