|
@@ -0,0 +1,69 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <button @click="test1">Test Button 1</button>
|
|
|
+ <button @click="test2">Test Button 2</button>
|
|
|
+ <button @click="test3">Test Button 3</button>
|
|
|
+ <button @click="test4">Test Button 4</button>
|
|
|
+ <button @click="test5">Test Button 5</button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ const test1 = () => {
|
|
|
+ console.log('Test Button 1 clicked')
|
|
|
+ }
|
|
|
+ const test2 = () => {
|
|
|
+ console.log('Test Button 2 clicked')
|
|
|
+ }
|
|
|
+ const test3 = () => {
|
|
|
+ console.log('Test Button 3 clicked')
|
|
|
+ }
|
|
|
+ const test4 = () => {
|
|
|
+ console.log('Test Button 4 clicked')
|
|
|
+ }
|
|
|
+ const test5 = () => {
|
|
|
+ console.log('Test Button 5 clicked')
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ margin: 10px;
|
|
|
+ padding: 15px 30px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #007bff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+ &:hover {
|
|
|
+ background-color: #0056b3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ margin: 10px;
|
|
|
+ padding: 15px 30px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #007bff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #0056b3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|