feature/rich_welcome_content #1
|
@ -38,6 +38,7 @@ export default defineComponent({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
notes: [],
|
notes: [],
|
||||||
|
isScrolling: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -45,24 +46,52 @@ export default defineComponent({
|
||||||
os.api('notes/featured').then(notes => {
|
os.api('notes/featured').then(notes => {
|
||||||
this.notes = notes;
|
this.notes = notes;
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
updated() {
|
||||||
|
if (this.$refs.scroll.clientHeight > window.innerHeight) {
|
||||||
|
this.isScrolling = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@keyframes scroll {
|
||||||
|
0% {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translate3d(0, calc(-100% + 90vh), 0);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
transform: translate3d(0, calc(-100% + 90vh), 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.civpbkhh {
|
.civpbkhh {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
> .note {
|
> .scrollbox {
|
||||||
margin: 16px 0 16px auto;
|
&.scroll {
|
||||||
|
animation: scroll 45s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
> .content {
|
> .note {
|
||||||
padding: 16px;
|
margin: 16px 0 16px auto;
|
||||||
margin: 0 0 0 auto;
|
|
||||||
max-width: max-content;
|
> .content {
|
||||||
border-radius: 16px;
|
padding: 16px;
|
||||||
> .richcontent {
|
margin: 0 0 0 auto;
|
||||||
min-width: 250px;
|
max-width: max-content;
|
||||||
|
border-radius: 16px;
|
||||||
|
|
||||||
|
> .richcontent {
|
||||||
|
min-width: 250px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue