diff options
Diffstat (limited to 'day9/task5_vue/src/components/UploadFileButton.vue')
| -rw-r--r-- | day9/task5_vue/src/components/UploadFileButton.vue | 23 |
1 files changed, 15 insertions, 8 deletions
diff --git a/day9/task5_vue/src/components/UploadFileButton.vue b/day9/task5_vue/src/components/UploadFileButton.vue index 96f3576..c668a0e 100644 --- a/day9/task5_vue/src/components/UploadFileButton.vue +++ b/day9/task5_vue/src/components/UploadFileButton.vue @@ -11,7 +11,7 @@ @click="triggerUploadFile"> <div v-if="isHovered">Upload File</div> <div v-else> - <img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;"> + <img src="/static/images/upload_icon.png"> </div> </button> </div> @@ -36,7 +36,10 @@ } </script> -<style scoped> +<style scoped lang="less"> + @button-radius: 100px; + @button-hovered-width: 300px; + button { overflow: hidden; white-space: nowrap; @@ -44,13 +47,13 @@ position: fixed; padding: 5px; - border-radius: 50px; - width: 100px; - height: 100px; + border-radius: @button-radius / 2; + width: @button-radius; + height: @button-radius; border: none; background-color: #2871e2; color: white; - font-size: 45px; + font-size: 30px; transition-property: width; transition-duration: 0.6s; @@ -60,12 +63,16 @@ } button:hover { - width: 300px; - font-size: 30px; + width: @button-hovered-width; background-color: #286bd6; } button:focus { background-color: #2861c3; } + + img { + width: @button-radius * 0.7; + height: @button-radius * 0.7; + } </style>
\ No newline at end of file |