add new decoration
This commit is contained in:
parent
85e3dddf2e
commit
5dc6cf53c5
|
@ -34,23 +34,25 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
@import url('../../assets/style/index.less');
|
||||||
|
|
||||||
.decoration-2 {
|
.decoration-2 {
|
||||||
|
|
||||||
.reverse, .normal {
|
.reverse, .normal {
|
||||||
background-color: #3faacb;
|
background-color: @D2LC;
|
||||||
}
|
}
|
||||||
|
|
||||||
.normal {
|
.normal {
|
||||||
width: 0%;
|
width: 0%;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
border-right: 1px solid #fff;
|
border-right: 1px solid @D2TC;
|
||||||
animation: normal-amt 6s ease-in-out infinite;
|
animation: normal-amt 6s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reverse {
|
.reverse {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 0%;
|
height: 0%;
|
||||||
border-bottom: 1px solid #fff;
|
border-bottom: 1px solid @D2TC;
|
||||||
animation: reverse-amt 6s ease-in-out infinite;
|
animation: reverse-amt 6s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 86 KiB |
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<div class="decoration-3">
|
||||||
|
<img src="./img/decoration.gif" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Decoration3'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.decoration-3 {
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue