110 lines
1.9 KiB
Vue
110 lines
1.9 KiB
Vue
<template>
|
|
<div class="mkw-tips">
|
|
<p ref="tip"><fa :icon="['far', 'lightbulb']"/><span v-html="tip"></span></p>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import anime from 'animejs';
|
|
import define from '../../../common/define-widget';
|
|
import i18n from '../../../i18n';
|
|
|
|
export default define({
|
|
name: 'tips'
|
|
}).extend({
|
|
i18n: i18n('common/views/widgets/tips.vue'),
|
|
|
|
data() {
|
|
return {
|
|
tips: [],
|
|
tip: null,
|
|
clock: null
|
|
};
|
|
},
|
|
created() {
|
|
this.tips = [
|
|
this.$t('tips-line1'),
|
|
this.$t('tips-line2'),
|
|
this.$t('tips-line3'),
|
|
this.$t('tips-line4'),
|
|
this.$t('tips-line5'),
|
|
this.$t('tips-line6'),
|
|
this.$t('tips-line7'),
|
|
this.$t('tips-line8'),
|
|
this.$t('tips-line9'),
|
|
this.$t('tips-line10'),
|
|
this.$t('tips-line11'),
|
|
this.$t('tips-line13'),
|
|
this.$t('tips-line14'),
|
|
this.$t('tips-line17'),
|
|
this.$t('tips-line19'),
|
|
this.$t('tips-line20'),
|
|
this.$t('tips-line21'),
|
|
this.$t('tips-line23'),
|
|
this.$t('tips-line24'),
|
|
this.$t('tips-line25')
|
|
];
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.set();
|
|
});
|
|
|
|
this.clock = setInterval(this.change, 20000);
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.clock);
|
|
},
|
|
methods: {
|
|
set() {
|
|
this.tip = this.tips[Math.floor(Math.random() * this.tips.length)];
|
|
},
|
|
change() {
|
|
anime({
|
|
targets: this.$refs.tip,
|
|
opacity: 0,
|
|
duration: 500,
|
|
easing: 'linear',
|
|
complete: this.set
|
|
});
|
|
|
|
setTimeout(() => {
|
|
anime({
|
|
targets: this.$refs.tip,
|
|
opacity: 1,
|
|
duration: 500,
|
|
easing: 'linear'
|
|
});
|
|
}, 500);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.mkw-tips
|
|
overflow visible !important
|
|
opacity 0.8
|
|
|
|
> p
|
|
display block
|
|
margin 0
|
|
padding 0 12px
|
|
text-align center
|
|
font-size 0.7em
|
|
color var(--text)
|
|
|
|
> [data-icon]
|
|
margin-right 4px
|
|
|
|
kbd
|
|
display inline
|
|
padding 0 6px
|
|
margin 0 2px
|
|
font-size 1em
|
|
font-family inherit
|
|
border solid 1px var(--text)
|
|
border-radius 2px
|
|
|
|
</style>
|